如何使标签内的元素免于后者的行为？

Question

在我的页面上，我有一个很大的 a 元素，其中包含不同的东西，包括一个 "open_modal" 按钮，它可以打开一些 Bootstrap 模态 window。单击 a 元素中的任何位置时，我希望发生正常行为，但单击 "open_modal" 应该只会打开模态 window（通过 Bootstrap 模态类).

HTML:

<a href='example.com'>
    <div class='open_modal'>doing something else</div>
</a>

将 stopPropagation() 与按钮一起使用成功地从中删除了 a 行为，但不幸的是，它也删除了附加到它的 Bootstrap 模态功能，因此它不再执行任何操作：

$( '.open_modal' ).click(function(event) {    
    event.stopPropagation();
});

有什么想法吗？

Answer 1

您应该使用 preventDefault() 而不是 stopPropagation()。 stopPropagation 阻止事件在事件链中向上冒泡（即，链中注册的事件不会调用）同时 preventDefault 阻止浏览器对该事件进行的默认操作（即，仅阻止当前事件的默认行为）。

$( '.open_modal' ).click(function(event) {    
    event.preventDefault();
});

如何使标签内的元素免于后者的行为？

How to exempt an element within a tag from the latter's behavior?

jquery

event-propagation

stoppropagation