如何让 div onblur 事件执行 javascript 函数？答案

【问题标题】：How to get div onblur event to execute a javascript function?如何让 div onblur 事件执行 javascript 函数？
【发布时间】：2013-08-30 08:15:45
【问题描述】：

嗨我有一个包含三个文本框的 div，一旦控件超出 div 标签，我需要调用一个函数，我不想使用 onclick 事件，因为可以通过按标签将焦点移出 div键盘上的键或其他方式。我还想知道是否有办法使用任何 javascript 库（如 jquery）来实现这一点。

谢谢，这是示例html代码

<html>
<head>
    <title>Div Onblur test</title>

    <script type="text/javascript">
        function Callme() {
            alert("I am Called")
        }
    </script>

</head>
<body>
    <div onblur="javascript:Callme();">
        <input type=text value ="Inside DIV 1" />
        <input type=text value ="Inside DIV 2" />
        <input type=text value ="Inside DIV 3" />
    </div>
     <input type=text value ="Outside DIV" />
</body>
</html>

【问题讨论】：

标签： javascript jquery html onblur

【解决方案1】：

您需要将 tabindex=0 添加到 div 以使其获得焦点。所以像

<div tabindex="-1" onblur="Callme();">

应该这样做。

【讨论】：

【解决方案2】：

您可以将 onblur 事件处理程序绑定到每个输入元素，并检查处理程序中是否有任何一个具有焦点（使用 document.activeElement）。

<script type="text/javascript">
    function checkBlur() {
        setTimeout(function () {
            if (document.activeElement != document.getElementById("input1") &&
                document.activeElement != document.getElementById("input2") &&
                document.activeElement != document.getElementById("input3")) {
                alert("I am called");
            }
        }, 10);
    }
</script>
<!-- ... -->
<div>
    <input type="text" id="input1" value="Inside DIV 1" onblur="checkBlur()" />
    <input type="text" id="input2" value="Inside DIV 2" onblur="checkBlur()" />
    <input type="text" id="input3" value="Inside DIV 3" onblur="checkBlur()" />
</div>
<input type="text" value="Outside DIV" />

或者，相反，使用 jQuery 可以简化流程（尤其是在您有大量输入的情况下）：

<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript">
    $(document).ready(function () {
        $("#theDiv input").bind("blur", function () {
            setTimeout(function () {
                var isOut = true;
                $("#theDiv input").each(function () {
                    if (this == document.activeElement) isOut = false;
                });
                if (isOut) {
                    // YOUR CODE HERE
                    alert("I am called");
                }
            }, 10);
        });
    });
</script>
<!-- ... -->
<div id="theDiv">
    <input type="text" value="Inside DIV 1" />
    <input type="text" value="Inside DIV 2" />
    <input type="text" value="Inside DIV 3" />
</div>
<input type="text" value="Outside DIV" />

编辑：我将事件处理程序包装在 setTimeout 中，以确保其他元素有时间关注。

【讨论】：

isOut = !jQuery.contains($("#theDiv").get(), document.activeElement);
+1 用于第二个解决方案，这对我也有帮助。我会说第一个是 -1：在模糊事件期间不保证 activeElement 行为，但只有在其处理程序完成之后。

【解决方案3】：

我在一个类似的场景中使用了以下 jQuery 脚本，其中一个 div 中有 3 个文本框：

<script type="text/javascript">
    $(document).ready(function () {
        $("jQuerySelectorToGetYourDiv").focusout(function (e) {
            if ($(this).find(e.relatedTarget).length == 0) {
                // Focus is now outside of your div. Do something here.
                // e.Target will give you the last element within the
                // div to lose focus if you need it for processing.
            }
        });
    });
</script>

【讨论】：

【解决方案4】：

<html>
<head>
    <title>Div Onblur test</title>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
    <script type="text/javascript">
        function Callme() {
            alert("I am Called");
        }

        $(function() {
            var callme;
            $('#onblur-callme input')
                .focus(function() {
                  callme = false;
                })
                .blur(function() {
                  callme = true;
                  setTimeout(function() {
                      if (callme) {
                          Callme();
                      }
                  }, 1);
                });
        });
    </script>

</head>
<body>
    <div id="onblur-callme">
        <input type="text" value ="Inside DIV 1" />
        <input type="text" value ="Inside DIV 2" />
        <input type="text" value ="Inside DIV 3" />
    </div>
     <input type="text" value ="Outside DIV" />
</body>
</html>

【讨论】：

焦点/模糊事件的相对顺序不保证在不同浏览器中相同。例如。见helephant, 2008。这会给您的代码（以及我的代码）带来麻烦！

【解决方案5】：

也许“onChange”事件会更好地满足您的需求。我想不出会单击 DIV 而不是输入字段的情况。

【讨论】：