Question

如何使用绑定点击事件阻止父链接。 li有href =“page.html”的锚标签，当li锚标签点击它时，li有子列表ul，它重定向到page.html并显示子列表ul。如何阻止来自redirectng page.html的父li achor标签点击事件只显示子列表并点击子列表中的事件anchortags任何提示..

我的问题是当页面添加并生成为顶部导航菜单时生成的动态菜单，其中菜单链接无法更改，它将具有登录页面。为了避免出现这种情况，使用带有jquery的下拉菜单点击事件：

<ul>
<li><a href="home.html"></a></li>
<li><a href="page1.html"></a></li>
<li><a href="page2.html"></a>
    <ul>
       <li><a href="sub-page1.html"></a></li>
<li><a href="sub-page2.html"></a></li>
<li><a href="sub-page3.html"></a></li>
<li><a href="sub-page4.html"></a></li>
</ul></li>
<li><a href="#"></a></li></ul>

jquery: 
if ($(window).width() < 900) {
$('ul.dynamic').hide();
$("li.dynamic-children a").bind({
    click: function (e) {
        $(this).next("ul.dynamic").toggle();
        e.stopPropagation();
    }
});} else {
$('ul.dynamic').hide();
$("li.dynamic-children").bind({
    mouseenter: function () {
        $(this).find("ul.dynamic").slideDown(300);
    },
    mouseleave: function () {
        $('ul.dynamic').hide();
    }
});}

onlick page2.html li项目的子项目子列表应显示为向下滑动，但页面链接不应该工作，e.preventdefault工作但子链接上的点击事件失败。

Answer 1

click事件也绑定到子节点，因为子节点在父节点中有事件。发生这种情况的原因是因为它会使DOM树冒泡，如果某个父级有事件，则触发

就我能理解你的要求而言，使用子菜单向li添加一个类（或其他东西），并在点击处理程序中添加event.preventDefault()，如下所示：

$('element').on('click', function(event){
    event.preventDefault();
    // expand menu here
});

另一个（imo更好）解决方案是添加一个按钮来展开它下面的菜单。只需在锚点之后添加[+]之类的内容，然后绑定一些内容即可将其展开这样，您可以继续使用锚点作为工作链接，并为用户提供对子菜单的轻松访问

父母也适用于孩子的绑定事件

1 个答案: