当在 jQuery 中使用不同的单击侦听器时，如何忽略一个模糊侦听器？答案

【问题标题】：How can I ignore one blur listener when a different click listener is used in jQuery?当在 jQuery 中使用不同的单击侦听器时，如何忽略一个模糊侦听器？
【发布时间】：2010-12-09 13:29:18
【问题描述】：

所以很难用一句话来表达，但这里有一个简单的例子：

<html>
    <head>
        <title>Example</title>
        <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
        <script type="text/javascript">
        <!--
            $(document).ready(function() {
                $("#input").focus(function() {
                    $("#p").show();
                }).blur(function() {
                    $("#p").hide();
                });
                $("#p").click(function() {
                    alert("Thanks for clicking me");
                });
            });
        -->
        </script>

    </head>
    <body>
        <input type="text" id="input" />
        <p id="p" style="background:red;display:none"">
            Click me.
        </p>
    </body>
</html>

基本上，当您专注于输入时，会出现一个段落，而当焦点模糊时，该段落就会消失。但是，该段落还有一个单击侦听器，因此当您单击它时会出现一个警告消息框。问题是当我关注输入框时，段落出现[预期]，但是当我点击段落时，输入框的模糊首先被注册，因此在浏览器检测到我点击它之前，该段落被隐藏。

【问题讨论】：

标签： javascript jquery event-handling

【解决方案1】：

试试Ben Alman's jQuery Outside events plugin

那么您的代码将是：

$(document).ready(function() {
    $("#input").focus(function() {
        $("#p").show();
    }).bind('focusoutside', function(event) {
        if (!$(event.target).is('#p')) {
            $("#p").hide();
        }
    });
    $("#p").click(function() {
        alert("Thanks for clicking me");
        // Do this if you need to hide #p after doing 
        // whatever click on p really does.
        $(this).hide(); 
    });
});

通过使用 focusoutside 事件，它将捕获远离#input 的点击和跳动，并让您根据焦点的位置来决定想要做什么。

示例：http://jsfiddle.net/petersendidit/WSEWh/2/

【讨论】：

那么在点击函数中你不需要$("#p").hide()吗？
@mikesir87 取决于当#p 被点击时他想要做什么。但很可能是的。
听起来不错！我不知道如何使用事件对象，所以这非常有用。谢谢！