取消文档点击中的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'));
});