Question

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

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...
});

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

Answer 2

您可以尝试使用此代码。单击锚点上的子项时，它会阻止父锚元素的默认行为。我在这里使用核心javascript：

var menuAnchor = document.querySelectorAll('.main-menu a');

for(var i = 0, len = menuAnchor.length; i < len; i++){
	menuAnchor[i].addEventListener('click', function(event){
		if(event.target != this) event.preventDefault();
	});
}

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

2 个答案: