Question

我在隐藏某些基于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>

Answer 1

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

示例代码：

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

Answer 2

用于div blur focusout（）将起作用

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

Answer 3

我是通过使用以下代码

完成的

<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>

Answer 4

您可以在tabindex代码中添加div属性：

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

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

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

Answer 5

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

Answer 6

我从多个解决方案中借鉴了一些提示，使事情变得简单。基本上当我关注某些东西时我希望它出现，但如果我点击它，我希望它再次隐藏。所以，如果我点击出现的div中的内容，我的点击然后去查看它是否找到了一个名为＆＃34; DivHoldingcustomController＆＃34;的父母。如果是这样，什么也不做。如果没有（因为我点击了其他地方，所以我点击它没有这个父母），然后隐藏自定义控制器。

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

Answer 7

您可以使用mouseleave方法和解决方案

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

Answer 8

jQuery具有.focusin()和.focusout()方法，用于绑定模糊并将事件聚焦在不会触发本机javascript模糊事件的元素上。 jQuery focusout

Div元素上的jquery blur（）事件有问题

8 个答案: