解决：点击子元素（子元素本身也绑定了事件）不触发父元素绑定的事件

问题代码：

<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" ，点击非子元素的父元素区域：输出“ elementII”

须要实现的效果是：

1）点击子元素区域：只会输出 “ elementI ”；

2）点击非子元素的父元素区域输出：“elementII”

实现的方法：

在子元素绑定的事件中阻止父元素事件的冒泡。这个方法是须要使用jQuery的事件，使用“事件”首先是要在参数列表中添加“形参”，好比：

要使用的方法是：

代码：

如下代码代替子元素的事件：

/*子元素绑定的事件*/

$(".elementI").click(function(event){
 
   alert("elementI");
   event.stopPropagation()

});