stopPropagation（）不适用于委托事件

我试图切换.abb-bar，使用$.toggle()，只要其父（.abb）得到一个点击。但每当.abb-bar得到一个点击，它会自己切换，因为event-bubbling。 e.stopPropagation()应该解决问题，但它不起作用。可以做些什么？stopPropagation（）不适用于委托事件

HTML

<span class="col-auto entry-ops abb"> 
    <i class="fa fa-bars"></i> 
    <div class="list-group abb-bar"> 
     <button class="list-group-item list-group-item-action d-flex justify-content-center" data-user="nick">follow</button> 
     <button class="list-group-item list-group-item-action d-flex justify-content-center complain">complain</button> 
     <button class="list-group-item list-group-item-action d-flex justify-content-center show-entry-number" data-toggle="tooltip">'.$row['entry_id'].'</button> 
    </div> 
</span>

$(document).on('click', '.abb', function(e) { 
    e.stopPropagation(); 
    $(this).children('.abb-bar').toggle(); 
});

来源

2017-09-23 Gai Kuroda

stopPropagation将停止从点火那是它的父母......不是孩子的事件......但你坐在文件，所以点击已经到达那里。 – epascarello

我没有得到它为什么人们downvote别人的答案，不给理由 – krishnar

@ krishnar你的答案可能是downvoted，因为答案只包括代码和解释文本。尝试添加一些关于您的代码更改内容的解释，以创建更好的收到答案。 –

你不应该在这里使用事件代表团。

当事件到达document时，它只有一个元素传播到（window）。它已经传播到document，所以你不能追溯取消它已经被触发的元素。这是事件代表团的本质......让事件一路向上，然后看看哪个元素发起了事件。

您只需要在toggle元素上设置一个click事件并取消子容器上的click事件。

// Set the click event handler on the toggle area 
 
$('.abb').on('click', function(e) { 
 
    $('.abb-bar', this).toggle(); 
 
}); 
 

 
// Don't enable the click event on the child 
 
$('.abb-bar').on('click', function(e) { 
 
    e.stopPropagation(); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<span class="col-auto entry-ops abb"> 
 
    <i class="fa fa-bars">Click to toggle</i> 
 
    <div class="list-group abb-bar"> 
 
     <button class="list-group-item list-group-item-action d-flex justify-content-center" data-user="nick">follow</button> 
 
     <button class="list-group-item list-group-item-action d-flex justify-content-center complain">complain</button> 
 
     <button class="list-group-item list-group-item-action d-flex justify-content-center show-entry-number" data-toggle="tooltip">'.$row['entry_id'].'</button> 
 
    </div> 
 
</span>

来源

2017-09-23 19:49:12

我没有得到它为什么必须发送这个来切换 – krishnar

@krishnar'abb-bar'是什么需要被切换。 'this'（作为选择器的第二个参数）只是提供了可以找到它的地方的上下文。这是一种提高性能的方法，并且强烈建议在复杂的DOM结构中使用。这不是必需的。如果有多个'.abb-bar'元素，这将会被请求，因为这将防止其他人切换。 –

stopPropagation（）不适用于委托事件

回答

相关问题