Div元素上的jquery blur（）事件问题[重复]答案

【问题标题】：Problem with jquery blur() event on Div element [duplicate]Div元素上的jquery blur（）事件问题[重复]
【发布时间】：2019-05-14 18:26:17
【问题描述】：

我在隐藏某些基于 div 的弹出窗口时遇到问题。当我点击他们不隐藏的那些div时。这是我正在做的示例代码..

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>

    <script type="text/javascript" src="../JS/jquery-1.3.2.js"></script>
    <script type="text/javascript">
        $(document).ready(function()
        {
            $("#MainCanvas div").blur(function()
            {
                alert("blured");
            });
        });
    </script>

</head>
<body>
    <div id="MainCanvas" style="width: 400px; height: 350px; border: solid 1px black;">
       <div class="ui-widget-content" style=" vertical-align:middle; height:60px; border: solid 2px black; width:300px;">
            Drag me around
        </div>
    </div>

</body>
</html>

【问题讨论】：

标签： jquery html onblur

【解决方案1】：

如果我没记错的话，只有 A、AREA、BUTTON、INPUT、LABEL、SELECT、TEXTAREA 创建焦点/模糊事件。如果您想通过在弹出窗口外部单击来隐藏弹出窗口，则必须例如监听文档上的点击事件并检查该事件是在弹出窗口内部还是外部发生。

示例代码：

$(document).click(function(e){
    if($(e.target).is('#MainCanvas, #MainCanvas *'))return;
    $('#MainCanvas').hide();
});

【讨论】：

或者，如果您不希望您的用户必须点击，您可以使用 mouseout。如果他们必须点击某个地方，您不妨在对话框上设置一个关闭按钮并让他们点击该按钮。
谢谢拉斐尔..我明白了..
@Jehanzebafridi 不要忘记检查您接受的答案是否已接受（答案左侧数字下方的图标）
虽然这可行，但为了获得更全面的解决方案，特别是如果您的弹出层包含许多嵌套元素，所有这些元素都可能获得点击事件，请查看以下答案：stackoverflow.com/a/4629849/1371408

【解决方案2】：

对于 div blur focusout() 将起作用

 $('#divCustomerGroup').focusout(function () {
            alert('yo');
        });

【讨论】：

到顶部！简洁大方。

【解决方案3】：

您可以在div 标签上添加tabindex 属性：

<div class="my_div" tabindex="3"></div>

之后，模糊事件将起作用：

$('.my_div').blur(function(){ 
   //code ... 
});

【讨论】：

【解决方案4】：

我已经使用下面的代码完成了

<script>
    $(document).click(function (e) {
        if ($(e.target).is('._dpcontrol, ._dpcontrol *'))
            return;
        $('._dpcontrol').each(
                function (index, value) {
                    var retrivedtextbox = $(this).find('._dpitem')[0];
                    $(retrivedtextbox).fadeOut();
                });     
    });
</script>

【讨论】：

【解决方案5】：

最好的办法是处理 mousedown 事件并检查调用该事件的元素。

【讨论】：

【解决方案6】：

我从多个解决方案中借用了一个技巧来简化一些事情。基本上，当我聚焦某些东西时，我希望它出现，但如果我点击它，我希望它再次隐藏。因此，如果我单击出现的 div 内的某些内容，我的单击然后会查看它是否找到名为“DivHoldingcustomController”的父级。如果是这样，什么也不做。如果没有（因为我点击了其他地方，所以我点击的任何东西都没有这个父级），然后隐藏自定义控制器。

    $(document).on("click", function (event) {
        var groupSelectorArea = $(event.target).closest(".DivHoldingCustomController").length == 1;
        if (!groupSelectorArea)
            $(".SomethingIWantToHide").hide();
    });

【讨论】：

【解决方案7】：

可以使用mouseleave方法及解决方案

 <script type="text/javascript">
    $(document).ready(function()
    {
        $("#MainCanvas div").mouseleave(function()
        {
            alert("mouseleave");
        });
    });
</script>

【讨论】：

【解决方案8】：

jQuery 有.focusin() 和.focusout() 方法用于绑定模糊和焦点事件在不触发原生javascript 模糊事件的元素上。 jQuery focusout

【讨论】：