Question

我有像这样的DOM

<div class="modal">
<li>

<div id="block1"></div>
<div id="block2">

<div class="btn-wrap">
<button>cancel</button>
<button>save</button>
</div>

</div>

</li>

我有一个附加到li的点击事件，当我点击block2的按钮时，发生了该事件。如何防止这种情况发生？

我尝试使用on（）但它不起作用。

$('.btn-wrap').on('click','button:first-child',function(e){
            e.preventDefault();
            alert('test');
        });

Answer 1

您应该使用stopPropagation来防止事件冒泡：

$('.btn-wrap').on('click','button:first-child',function(e){
   e.stopPropagation();
   alert('test');
});

Answer 2

将 event.stopPropagation（）添加到您的处理程序

$('.btn-wrap').on('click', 'button:first-child', function(e)
{
    e.preventDefault();
    e.stopPropagation();

    alert('test');
});

防止事件冒泡在jquery中不起作用

2 个答案: