JavaScript - 防止父 anchor 元素上的 event.default

Question

我制作了一个基本的移动导航下拉菜单，它使用嵌套标签打开导航的第二(和第三)级。然而，因为元素嵌套在 anchor 标签中，它们也会触发默认的 anchor 事件。单击所述 anchor 的子元素时，有什么方法可以防止 anchor 默认事件？

HTML

<ul class="main-menu">
    <li>
        <a href="some-link.html">Some Link
            <span class="target"></span>
        </a>
        <ul class="submenu">
            <li><a href="some-link.html">Some Link</a></li>
            <li><a href="some-link.html">Some Link</a></li>
            <li><a href="some-link.html">Some Link</a></li>
        </ul>
    </li>
</ul>

Javascript 示例

$('span.target').on('click', function(event) {

    $(event.target).parent().preventDefault();

    // Do somthing

});

Answer 1

您可以停止事件的传播，并取消它的默认行为。看这个:

$('span.target').on('click', function(event) {
  event.stopPropagation();
  event.preventDefault();
  
  // the rest of your code here...
});

如评论中所述，我将这两行添加为我的“自动”工作流程的一部分，以防我绑定(bind)到 anchor 标记 (a) 并防止离开页面的默认行为(即 preventDefault ()), 和 stopPropagation 以避免触发父元素的绑定(bind)事件。