解決：點擊子元素（子元素本身也綁定了事件）不觸發父元素綁定的事件

問題代碼：

<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()

});