如何在JavaScript中单击子元素时覆盖父事件监听器？

Question

如何在 child.js 中覆盖 aFunction？

我希望子事件监听器可以触发，但不触发 aFunction，并且我不能修改 parent.js。

这是否可能？

index.html:

       <th class="foo">foo &nbsp;&nbsp;

            <span class="bar" data-feather="arrow-down"></span>

        </th>

parent.js:

       parent = {
            init: function() {
                parent.aFunction($('.foo'));
            },
            aFunction: function(element) {
                element.on('click', function() {
                    alert('foo');
                });
            }, ...

         window.onload = parent.init;

child.js:

    $('.bar').on('click', function() {
      alert('bar');
    });

- Lord Elrond

Answer 1

• 首先是因为没有名为bar的html标签，所以它的类名应该改为.bar
• event.stopPropagation() 阻止事件冒泡到DOM树上，防止任何父处理程序被通知该事件。

示例

$('.foo').on('click', function() {
  alert('foo');
});
$('.bar').on('click', function(e) {
  e.stopPropagation();
  alert('bar');
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="foo">foo &nbsp;&nbsp;
    <span class="bar" data-feather="arrow-down">Bar</span>
</div>

- Mohamed-Yousef