JavaScript - 阻止父锚元素上的event.default

我制作了一个基本的移动导航下拉菜单，它使用嵌套标记打开导航的第二个（和第三个）级别。但是因为这些元素嵌套在锚标签中，所以它们也会触发默认的锚事件。点击锚点的子元素时，是否有办法阻止锚点默认事件？JavaScript - 阻止父锚元素上的event.default

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 

});

来源

2017-04-10 Frederick M. Rogers

尝试'event.stopImmediatePropagation（）' –

你为什么要使用阿克尔标签，如果你不想使用它呢？为什么不使用div或其他跨度并使用js来实现你想要的行为？ – Cruiser

preventDefault不是DOM的一部分，它是事件的一部分。听起来像你想要https://api.jquery.com/event.stoppropagation/ – epascarello

您可以试试这段代码。当你点击锚点上的孩子时，它可以防止父锚元素的默认行为。我使用的核心JavaScript这里：

var menuAnchor = document.querySelectorAll('.main-menu a'); 
 

 
for(var i = 0, len = menuAnchor.length; i < len; i++){ 
 
\t menuAnchor[i].addEventListener('click', function(event){ 
 
\t \t if(event.target != this) event.preventDefault(); 
 
\t }); 
 
}

来源

2017-04-10 18:13:24

不幸的是，这将阻止我想要的锚的默认动作，我只是不希望它点击锚内的子元素时触发。 –

我改变了代码。它现在工作正常。 –

当你点击锚的孩子时，它可以防止默认（停止访问链接）。但是当你点击锚点（不是锚点的子点）时，它不会阻止默认值（请访问链接）。 –

你可以阻止事件的传播，并取消它的默认行为。看到这一点：

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

正如在评论中提到的，我加的2线作为我的“自动”工作流程的一部分，如果我绑定到一个锚标记（a）和防止导航离开页面的默认行为（即preventDefault（））和stopPropagation以避免触发父元素的绑定事件。

来源

2017-04-10 17:51:08 JorgeObregon

注意......做一个或其他将工作...和'返回false'也将做这两个 – charlietfl

我将这两行作为一部分添加我的'自动'工作流，以防我绑定到锚标签（'a'）并阻止导航离开页面的默认行为（即preventDefault（）'）和'stopPropagation'来避免父元素'绑定事件被触发。 – JorgeObregon

我可能会误会，但是这不会简单地阻止我将附加到锚点的事件/处理程序？ –

JavaScript - 阻止父锚元素上的event.default

回答

相关问题