时间戳

首页 > 解决方案 > 弹出窗口未触发 focusout() 或 blur()

jquery - 弹出窗口未触发 focusout() 或 blur()

问题描述

当我点击一个链接（如气泡字段）时，我会出现一个弹出窗口，如果我点击弹出窗口外部甚至内部，我想关闭它。

我认为 focusout() 非常适合，但它不起作用。我可以触发 focusin()，但不能触发 focusout() 或 blur()

HTML：

// This div is hidden and appears on a click on <a>

<div class="popup" id="${topo.id}">
    <div class="popuptext">
        <p class="descriptionPopup">
            <span>Description :</span>
            <br>${topo.description}<br>
            <span>Edition:</span>
            <br>${topo.dateEdition}
        </p>
    </div>
</div>

<li class="itemTopo" id="${topo.id}">
    <a>- <c:out value="${topo.nom}"/></a>
</li>

查询：

// This function toggle the class on the link (which is ok)

var idTopo;

$(".itemTopo a").click(function () {
    idTopo = $(this).parent().attr('id');
    $("#"+idTopo+" > div").toggleClass("show");
    $(this).parent().focusin();
});

// focusin is triggered (for test)
$('.itemTopo').focusin(function(){
    alert("focusin");
});


// None of these events are triggered 
// when i click anywhere on the page after the popup appeared

$('.item topo').focusout(function(){
    alert("focusout");
    $("#"+idTopo+" > div").toggleClass("show");
});

$('.itemTopo').blur(function(){
    alert("focusout");
    $("#"+idTopo+" > div").toggleClass("show");
});

标签： jquery

解决方案

焦点事件仅适用于可以获得焦点的元素。可以使用 使任意元素成为焦点tabindex，但这可能不是您想要的。

在弹出窗口之外捕获点击的一种简单方法是将其包裹在覆盖整个视口的透明元素中——例如，使用position: fixed并将所有四个边缘设置为0——然后捕获对它的点击。甚至在弹出窗口内的点击也会冒泡到包装器并关闭它。（如果这不是您想要的，您可以使用它event.stopPropagation()来停止冒泡。）

推荐阅读