父元素与子元素的点击事件影响问题

例如以下的代码：
html：

<div class="elementI" style="height: 100px;width: 100px;border: 1px solid red;">
    父元素
    <div class="elementII" style="height: 50px;width: 50px;border: 1px solid black;">子元素</div>
</div>
<script type="text/javaScript">
    /*子元素绑定的事件*/
    $(".elementI").click(function(){
        alert("elementI");
    });
    /*父元素绑定的事件*/
    $(".elementII").click(function(){
        alert("elementII");
    });

</script>

达到的目的是，点击子元素区域只会触发子元素的事件，输出“elementI”,点击除“子元素”外的“父元素”区域输出“elementII”.

$(".elementI").click(function(event){
    //谷歌、火狐兼容，IE不兼容
    //alert("elementI");
    //event.stopPropagation()//阻止事件冒泡
    //IE下则使用
    //event.cancelBubble = true;
    if ((navigator.userAgent.indexOf('MSIE') >= 0)&& (navigator.userAgent.indexOf('Opera') < 0)){ 
        event.cancelBubble = true;
    }else{
        event.stopPropagation();
    }
});

 //在事件处理函数中添加event参数（或者任一个参数），当事件触发时，也就创建了事件对象，该事件对象只有该事件处理函数才能访问到，当事件处理函数运行结束时，事件对象自动删除
$(Element).click(function(event){
     ..................
})
当在含有事件对象的处理函数中返回false（return false;）,作用是阻止事件冒泡并且阻止元素默认行为。（元素的默认行为比如超链接的跳转、表单的提交等）
$(Element).click(function(event){
     ..................
     return false;
})​

来源：CSDN

作者：lxacdf

链接：https://blog.csdn.net/lxacdf/article/details/73280978