jQuery菜单锚点onBlur事件禁用Div子锚点

debugcn 发表于 Dev

过错

我是JQuery开发的新手。我正在onblur尝试为我的网站制作自定义菜单时，我遇到了与该事件有关的问题。谁能帮我这个忙。

请找到JS小提琴JS小提琴

$(document).ready(function () {
    $('#showmenu').click(function (e) {
        e.preventDefault();
        this.focus();
        $('#serviceMenu').slideToggle("fast");
        $('#Contact').hide();
    });

    $('#showmenu').blur(function (e) {
        $('#serviceMenu').hide();
    });
});

问题在于show / hide div机制是基于<a>标签的。单击<a>菜单上的切换就可以了。当用户在菜单和显示的div之外的任何位置单击时，我也希望菜单进行切换。在小提琴中，我onblur()为锚添加了事件，即使我的子链接进入onblur()主锚的div触发事件内，并隐藏菜单。我试图阻止event.propagation()，但它对我不起作用。

双U23

这里的问题是，在单击#serviceMenu之前，调用了模糊事件，您还应该了解事件传播的工作方式：直接事件和委托事件我更新了小提琴（带有一些注释）：http：// jsfiddle。净/ M4LJh / 7 /

$(document).ready(function () {
    $('#showmenu').on('click', function (e) {
        this.focus();
        $('#serviceMenu').slideToggle("fast");
        $('#Contact').hide();
        return false;
    });

    // prevent clickEvent to bubble up to #showmenu
    $('#serviceMenu a').on('click', function(e){e.stopPropagation();});

    // hide #serviceMenu on bodyClick
    //    - anywhere but an element with propagation stopped event
    $('body').on('click', function (e) {
        $('#serviceMenu').hide();
        return false; // e.stopPropagtaion(); + e.preventDefault();
    });
});

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。