焦点事件被另一个焦点事件忽略答案

【问题标题】：focus event is ignored by another focus event焦点事件被另一个焦点事件忽略
【发布时间】：2013-10-08 12:00:45
【问题描述】：

在下面的代码中，如果文本框处于焦点位置，则会出现 redDiv。

如果 redDiv 或其子元素处于焦点位置，则它必须保持可见，并且只有在失去焦点时才会隐藏。你能帮忙吗？

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>

    <script src="jquery-1.8.2.min.js"></script>

    <script type="text/javascript">


        $(document).ready(function () {

            var onetxt = $('<input type="text" />');

            var Input1 = $('<input type="text" />');

            var redDiv = $('<div>', { tabindex: "5", style: "width:200px;height:200px;background:red; display:none;", text: 'test', html:"<br /><br />" }).append(Input1);





            onetxt.focusin(function () {
                redDiv.show();
            });
            Input1.focusin(function () {
                redDiv.show();
            });
            redDiv.focusin(function () {
                redDiv.show();
            });


            onetxt.blur(function () {
                redDiv.hide();
            });






            $('#myarea').after(onetxt,redDiv);

        });



    </script>

</head>
<body>

    <div id="myarea"></div>

</body>
</html>

【问题讨论】：

Make focusout event ignore some elements的可能重复

标签： javascript jquery

【解决方案1】：

如果满足您的条件，您需要在每次隐藏 div 时检查。

例如（我还设置了 10 毫秒的超时时间，以便在元素隐藏之前切换焦点）：

$(document).ready(function () {
    var hider = null;
    var onetxt = $('<input type="text" />');
    var Input1 = $('<input type="text" />');
    var redDiv = $('<div>', {
        tabindex: "5",
        style: "width:200px;height:200px;background:red; display:none;",
        text: 'test',
        html: "<br /><br />"
    }).append(Input1);

   function hideRed () {
       if (!onetxt.is(':focus') && !Input1.is(':focus') && !redDiv.is(':focus')) {
           hider = setTimeout(function () {redDiv.hide();}, 10);
       }
    }

    function showRed () {
        if (hider !== null) {
            clearTimeout(hider);
            hider = null;
        }
        redDiv.show();
    }

    onetxt.focusin(showRed);
    Input1.focusin(showRed);
    redDiv.focusin(showRed);

    redDiv.blur(hideRed);
    Input1.blur(hideRed);
    onetxt.blur(hideRed);

    $('#myarea').after(onetxt, redDiv);
});

Jsfiddle

【讨论】：

你试过确切的例子吗？如果它在 jsfiddle 上工作，它会在你放置它的任何地方工作，因为它在浏览器中以相同的方式运行。
嗨，是的，我做到了，在 jsfiddle 中它工作得很好，但我的例子也是如此。如果我在我的电脑上运行它就不会。谢谢
那你做错了什么。 JavaScript 在客户端运行，因此它所在的服务器不会影响它的运行方式。
如果您在本地测试它，那么您会看到。我知道这真的很奇怪，这就是我发布这个问题的原因。谢谢