Javascript 当用户单击通知Div之外的任何位置时，使通知Div淡出

我正在制作一个有通知按钮的网站。当用户单击此按钮时，通知div将显示在按钮底部

我想让它的行为像facebook上的Notification一样。当用户单击notification div元素之外的任何位置时，通知将消失

到目前为止，我已经成功地使通知div在单击通知按钮时淡入淡出。我正在使用jquery来实现这一点

但是，我不知道如何在用户单击notification div之外的任何位置时使其淡出

有人能帮我吗

以下是我编写的代码：

<div id="notifikasi" style="position:relative; cursor:pointer">Notification<sup style="padding: 2px 4px 2px 4px; background: red"></sup>
    <div id="theNotif" style="position: absolute; top: 20px; left: 0px; background: #fff; color: #000; border: solid 1px #999; z-index: 999; padding: 10px 20px 10px 0px; width:200px; display:none">
        <ul>
            <li>Some Notification</li>
            <li>Some Notification</li>
            <li>Some Notification</li>
        </ul>
    </div>
</div>

<script>
$('#notifikasi').click(function(){
    if($('#theNotif').css('display') == 'none'){
        $('#theNotif').fadeIn('fast');
    }
    else{
        $('#theNotif').fadeOut('fast');
    }
});
</script>

通知

一些通知
一些通知
一些通知

$（“#notifikasi”）。单击（函数（）{
if（$（'#theNotif'）.css（'display'）=='none'）{
$（'theNotif'）.fadeIn（'fast'）；
}
否则{
$（'theNotif'）.fadeOut（'fast'）；
}
});

试试这个：

$(document).mouseup(function (e)
{
    var myDiv = $("#theNotif");
    if (myDiv.has(e.target).length === 0)
        myDiv.hide();
});

试试这个：

$(document).mouseup(function (e)
{
    var myDiv = $("#theNotif");
    if (myDiv.has(e.target).length === 0)
        myDiv.hide();
});

那么：

$('#notifikasi').click(function(){
    $('#theNotif').fadeIn('fast', function() {
        $(document).one('click', function(e) {
            $('#theNotif').fadeOut('fast');
        });
    });
});

// prevent triggering when clicking the actual notification
$('#theNotif').click(function() { return false; });​

通知淡入后，将向侦听任何单击的文档中添加一个一次性单击侦听器

---

编辑

我自己也做过类似的尝试，我得出的结论是，

.one

在这里并没有我最初想象的那么有用，因为它需要一些其他的解决方法。我之所以使用它，是因为它让我感到恼火，因为我不得不不断地聆听每一个文档的点击，只是为了覆盖打开通知的场景

我决定用绑定和取消绑定来代替

function closeNotification(e) {
   if($(e.target).closest('#theNotif').length > 0) {
      // notification or child of notification was clicked; ignore
      return;
   }

   $('#theNotif').fadeOut('fast');
   $(document).unbind('click', closeNotification);
};

$('#notifikasi').click(function(){
    $('#theNotif').fadeIn('fast', function() {
        $(document).bind('click', closeNotification);
    });
});

上面的代码在概念上与原始代码非常相似。淡入后，单击侦听器将在文档中注册。这一次，在文档单击侦听器中进行检查，以查看单击的元素是

\theNotif

还是

\theNotif

的子元素，在这种情况下，关闭函数立即退出

否则，它将继续关闭通知，然后立即解除侦听器的绑定

请注意，为了能够正确解除绑定，您必须使用命名函数，而不是jQuery中可能使用的匿名内联函数。

$('#notifikasi').click(function(){
    $('#theNotif').fadeIn('fast', function() {
        $(document).one('click', function(e) {
            $('#theNotif').fadeOut('fast');
        });
    });
});

// prevent triggering when clicking the actual notification
$('#theNotif').click(function() { return false; });​

通知淡入后，将向侦听任何单击的文档中添加一个一次性单击侦听器

---

编辑

我自己也做过类似的尝试，我得出的结论是，

.one

在这里并没有我最初想象的那么有用，因为它需要一些其他的解决方法。我之所以使用它，是因为它让我感到恼火，因为我不得不不断地聆听每一个文档的点击，只是为了覆盖打开通知的场景

我决定用绑定和取消绑定来代替

function closeNotification(e) {
   if($(e.target).closest('#theNotif').length > 0) {
      // notification or child of notification was clicked; ignore
      return;
   }

   $('#theNotif').fadeOut('fast');
   $(document).unbind('click', closeNotification);
};

$('#notifikasi').click(function(){
    $('#theNotif').fadeIn('fast', function() {
        $(document).bind('click', closeNotification);
    });
});

上面的代码在概念上与原始代码非常相似。淡入后，单击侦听器将在文档中注册。这一次，在文档单击侦听器中进行检查，以查看单击的元素是

\theNotif

还是

\theNotif

的子元素，在这种情况下，关闭函数立即退出

否则，它将继续关闭通知，然后立即解除侦听器的绑定

---

请注意，为了能够正确地解除绑定，您必须使用命名函数，而不是jQuery中可能使用的匿名内联函数。

当鼠标移动到notifikasi上时设置一个变量（假设a=1），当鼠标移动到外部时将其解除绑定。 同样的道理。 现在

---

当鼠标移动到notifikasi上时设置一个变量（假设a=1），当鼠标移动到外部时取消设置。 同样的道理。 现在

---

但这只有在他在分区内点击“notifikasi no？”才能起作用。大卫·赫德隆德：谢谢，大卫。我试过你的代码，但不起作用。单击按钮后，div会淡入淡出。@TikasMamed：是的，在我的原始帖子中，我过早地添加了文档click listener，它立即启动。查看我更新的答案。@john：不，侦听器在文档上，就像您的示例中一样；看演示。@john：我知道。我个人会避免这样一种解决方案，即在整个文档中每次单击都会执行一些（尽管很少）代码，只是为了涵盖可能很少有通知隐藏的情况。但这只有在他单击“notifikasi no？”分区时才起作用。@David Hedlund谢谢，David。我试过你的代码，但不起作用。单击按钮后，div会淡入淡出。@TikasMamed：是的，在我的原始帖子中，我过早地添加了文档click listener，它立即启动。查看我更新的答案。@john：不，侦听器在文档上，就像您的示例中一样；看演示。@john：我知道。我个人会避免这样一种解决方案，即在整个文档中每次单击都会执行一些代码（尽管很少），只是为了涵盖可能很少有通知要隐藏的情况。谢谢，@john！成功了！但是我不明白它是怎么工作的？@TikasMamed-它相当简单，看看这里：mouseup事件可以在这里找到：一旦你释放鼠标点击，它就会触发mouseup事件。您可以在示例jquery页面（底部）上尝试它。谢谢。我以前从未知道或使用过

has（）

或

mouseup（）

。这真的解决了问题。谢谢，@john！成功了！但是我不明白它是怎么工作的？@TikasMamed-它相当简单，看看这里：mouseup事件可以在这里找到：一旦你释放鼠标点击，它就会触发mouseup事件。您可以在示例jquery页面（底部）上尝试它。谢谢。我以前从未知道或使用过

has（）

或

mouseup（）

。这真的很难解决