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

Question

我是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()事件，即使div内的子链接触发主锚的onblur()事件，并隐藏菜单。 我试图阻止event.propagation() ，但它对我不起作用。

Answer 1

这里的问题是，在单击#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();
    });
});