javascript - 当只存在一个对象时，jquery 返回两个对象

Question

给定这个 HTML，

<div id="dd_container" class="dd dd_container">
 <ul class="dd_deploy">
   <li class="dd_deploy">
     more options
   </li>
  </ul>
 <ul class="dd">
   <li class="dd">
     el1
   </li>
   <li class="dd">
     el2
   </li>
   <li class="dd">
     el3
   </li>   
 </ul>
</div>​

为什么这个 jquery 函数会打印到控制台两次？

$(document).on('click','.dd_deploy', function(){
    console.log($(this).parents('.dd_container').children('ul.dd'));
});​

http://jsfiddle.net/mBPfG/

Answer 1

因为您有 2 个.dd_deploy元素，一个嵌套在另一个元素中，所以事件正在冒泡。

<ul class="dd_deploy">
    <li class="dd_deploy">
        more options
    </li>
</ul>

如果要使用此 HTML 结构，您可以使用它event.stopPropagation来防止事件冒泡，如下所示：

$(document).on('click','.dd_deploy', function(e){
    e.stopPropagation();
    console.log($(this).parents('.dd_container').children('ul.dd'));
});​

另请注意，$(document)作为委托事件处理程序的主要选择器并不是性能的理想选择。而不是document使用未动态附加到 DOM 的最近元素。

Answer 2

因为事件正在冒泡<li>到<ul>.

看我的修改：

$(document).on('click','.dd_deploy', function(event){
    console.log(event.target)
});​

它将打印<li>元素，然后是<ul>元素。

为了防止这种情况，您需要您的事件处理程序return false或者调用event.stopPropagation().

Answer 3

$(document).on('click','.dd_deploy', function(e){
    e.stopPropagation(); //stops the bubbling
    console.log($(this).parents('.dd_container').children('ul.dd'));
});​