jquery - 在文档单击时取消固定 div

Question

我有一个 div 可以在悬停时切换并在点击时固定。我正在尝试添加一个在用户单击页面其余部分时取消固定 div 的功能。

我尝试使用这个：

$( document ).on('click', function( e ) {
   if( e.target.id != 'dialog-box' ){
      $( ".dialog-box" ).hide();
   }   
});

但是，即使单击激活 div，它也会隐藏 div。

这是我用于 pin 的 jQuery：

$(document).ready(function(){
    $(".two").hover(function() {
        if (!$(this).data('pinned')) $(".dialog-box").toggle("slow");
    });
$(".two").click(function() {
    $(this).data('pinned', !$(this).data('pinned'));
    });
});

这是我所做的工作，不包括上面的第一个脚本：

http://jsfiddle.net/XXd5t/1/

Answer 1

只需在单击 div 时停止事件冒泡，这样您就知道单击事件是否到达文档，而不是单击 div。

http://api.jquery.com/event.stopPropagation/

$( document ).on('click', function( e ) {
    $( ".dialog-box" ).hide();
});

$(".two").click(function(e) {
    e.stopPropagation();
    $(this).data('pinned', !$(this).data('pinned'));
});