自动完成列表事件停止传播问题答案

【问题标题】：Autocomplete list event stoppropagation issue自动完成列表事件停止传播问题
【发布时间】：2015-10-05 11:25:12
【问题描述】：

我有一个点击按钮隐藏/显示的面板在 Panel Input 区域下，使用自动完成来显示数据。

$('body').click(function () {
   $('.bk-panel').hide();
});

点击正文面板时，它也适用于内部元素/点击内部元素时它不会隐藏，因为我使用过这个：

$('.bk-panel').click(function (e) {
   e.stopPropagation();
});

但是在输入时我使用了自动完成 jquery > 点击 ul li 列表，它隐藏了我的面板 div。

我已经尝试在所有这些类上进行传播 > ui-autocomplete ui-front ui-menu ui-widget ui-widget-content ui-corner-all / 似乎没有任何效果

【问题讨论】：

得到解决方案：如果有人需要解决方案：$('.autocomplete, .ui-autocomplete, .ui-menu-item, #ui-id-1021').click(function ( e) { e.stopPropagation(); });

标签： javascript jquery autocomplete propagation

【解决方案1】：

另一个更简单的选择：

$('body').click(function (e) {
    var container = $('.bk-panel');

    // if the target of the click isn't the container...
    // ... nor a descendant of the container
    if (!container.is(e.target) && container.has(e.target).length === 0) {
        container.hide();
    }
});

小提琴： https://jsfiddle.net/azq4wjdj/

【讨论】：