javascript - jquery 没有功能错过元素

Question

我使用工具提示在页面上显示错误消息，当我单击视图中的其他位置时需要将其关闭。我使用以下代码来控制此操作：

$(':not(.qtip)').click(function(){
   $('.qtip').hide();
});

“.qtip”用于标记工具提示区域。工具提示本身会在出现时创建一个新的，这里发生的是当我单击工具提示时，它会消失。

但是当我使用较小比例的选择器而不是整个身体时，它工作正常，这有点奇怪，例如：

$("#id").not('.qtip').click(function (){
    $('.qtip').hide();
});

Answer 1

建议只document针对处理工具提示之外的点击；选择器:not(.qtip)可能会返回一个非常大的结果集。

$(document).on('click', function() {
    $('.qtip').hide();
}

在工具提示本身上，您需要防止单击事件冒泡到文档级别，如果您还没有这样做：

$('.qtip').on('click', false);

Answer 2

使用事件冒泡来发挥你的优势

$(document).on("mouseup", function (e) {
    var target = e.target || e.srcElement;
    var container = $(".qtip");

    if (container.not(target) && container.has(target).length === 0)
    {
        container.hide();
    }
});

Answer 3

我建议你做两件事：

$(document).click(function() {
    $('.qtip').hide();
});


$('.qtip').click(function(e){
    e.stopPropagation();
});

1. 单击文档以隐藏.qtip
2. 停止点击的事件冒泡.qtip，这里点击不会遍历父级。

Answer 4

尝试

$(document).on("click", function(e) {
    var qtip = $(e.target).closest('.qtip');
    if(!qtip.length)
        $('.qtip').hide();
});