Question

如果用户点击特定子元素，我想阻止触发我的父点击方法。

示例html：

<div data-type="parent_holder" style="width:500px; height:500px;">
   <div data-type="child_holder" style="width:50px; height:50px; position:absolute;">
      click
   </div>
</div>

示例js：

我在js中使用jquery因为我将元素动态附加到可排序列表。

$( "#sortable" ).on( "click", "[data-type=parent_holder]", function() {
   alert('parent');
});

$( "#sortable" ).on( "click", "[data-type=child_holder]", function() {
   alert('child');
});

所以我想要的是，当用户点击parent_holder时它应该提醒父母，但是如果用户点击了child_holder，它应该提醒孩子，而不是提醒父母。

我搜索过stackoverflow，我尝试了很多建议，比如：not（），bubbling，stopPropagation（），但我似乎无法得到正确的结果。

Answer 1

听起来像你的情况正在发生事件传播，只需使用event.stopPropagation()

即可避免这种情况

尝试，

$( "#sortable" ).on( "click", "[data-type=child_holder]", function(e) {
   e.stopPropagation();
   alert('child');
});

DEMO

Answer 2

使用：

e.stopPropagation();

或

return false;

在子单击处理程序中

以防止事件从父事件传播。

Answer 3

如果由于某种原因你还需要点击事件来从子元素冒泡，你可以在父点击处理程序中过滤目标：

$( "#sortable" ).on( "click", "[data-type=parent_holder]", function(e) {
   if(!$(e.target).is('[data-type=parent_holder]')) return;
    alert('parent');
});

如果单击特定子项，则阻止父级单击触发

3 个答案:

DEMO

--DEMO--