Javascript 如何仅在特定元素可见时触发事件

我有一个警报

div

，当用户单击链接时出现。现在我想做的是，当有人在它外面点击时，隐藏这个

div

。默认情况下，它附加了一个

fadeoff

事件，但我希望用户能够通过单击其他位置来隐藏该div

我尝试将

$（'body'）放入函数调用中。在函数调用中单击
，但它不起作用。请帮忙，这是我的javascript

 var messageDiv = $('<div id="cannotDoDiv"></div>');
      $('body').append(messageDiv);  

      function appendDiv(this_element,msg)
      {
        var pos = this_element.offset();  
        var width = this_element.width();  
        messageDiv.css({  
          left: (pos.left - 20) + 'px',  
          top: pos.top + 30 + 'px'  
        });  
        $('#cannotDoDiv').fadeOut();
        $('#cannotDoDiv').html(msg).show().delay(1000).fadeOut();
        $('body').click(function(){
            $('#cannotDoDiv').hide();
        });
      }

    $("span#selfLike").click(function(){
        appendDiv($(this),'You cannot like your own post!');
    });

从我的函数
$（“span#selfLike”）。单击
可以正常工作，否则它不会被触发。
编辑：我想，我理解您的尝试。。请参阅下面更新的代码

使用
.one
仅绑定一次，并在绑定完成后解除绑定
用于
fadeIn
回调，因此只有在div可见后才会绑定它

//used call back function so it will be called only after it is 
//completly visible
$('#cannotDoDiv').html(msg).fadeIn("slow", function () {

     // below will be executed once and then unbind
     $(document).one('click', function(){  
       $('#cannotDoDiv').fadeOut();
    });

});


下面是完整的代码。。在此更新

$（文档）.ready（函数（）{
var messageDiv=$（''）；
$（'body'）.append（messageDiv）；
函数appendDiv（这个元素，msg）
{
var pos=该元素的偏移量（）；
var width=此_元素的宽度（）；
messageDiv.css（{
左：（位置左-20）+“px”，
顶部：位置顶部+30+‘px’
});  
$（'#cannotDoDiv'）.hide（）；
$（'#cannotDoDiv'）.html（msg）.fadeIn（“slow”，function（）{
$（文档）.one（'单击'，函数（）{
$（'#cannotDoDiv'）.fadeOut（）；
});
});    
$（'cannotDoDiv'）。一（'click'，function（）{
$（'#cannotDoDiv'）.fadeOut（）；
});
}
$（“span#selfLike”）。单击（函数（事件）{
appendDiv（$（这个），‘你不能喜欢你自己的帖子！’；
event.stopPropagation（）；
});
});

注意：当您单击
$（“#cannotDoDiv”）
div时，此选项也会关闭。如果您不希望出现这种情况，请添加一个click listener和StopperPogation

尝试
$（document）。单击（function（）{
而不是body。
如果
click
事件在
div
元素上触发，使其无法到达
文档
，则可以停止
click
事件的传播，然后将
事件处理程序绑定到隐藏
div
的
文档
元素：

$('#cannotDoDiv').on('click', function (event) {
    event.stopPropagation();
});
$(document).on('click', function () {
    $('#cannotDoDiv').hide();//you can now hide the div element because it was not clicked on but a click event fired
});

请注意，
.on（）
在jQuery 1.7中是新的，在本例中与使用
.bind（）
相同

您还可以在
文档
中取消绑定
单击
事件处理程序，以停止侦听事件（如果不需要这样做）：

$(document).on('click.cannotDoDiv', function () {
    $('#cannotDoDiv').hide();//you can now hide the div element because it was not clicked on but a click event fired
    $(this).off('click.cannotDoDiv');
});

由于我为事件使用了名称空间，因此不会删除附加到
文档
元素的任何其他事件处理程序。此外，
.off（）
在jQuery 1.7中是新的，在本例中与
.unbind（）相同
这正是我不想做的，因为这会将一个
click
事件附加到
文档上
通常会在该页面上进行多次单击，每次都会触发此事件，从某种意义上说，这是无用的，我想要的是仅当div被激活时才绑定事件visible@Sachin请参阅上面我的更新代码..使用哪种方法我尝试了您编写的内容，并将
.on（）
替换为
.bind（）
，现在该框不显示
$('#cannotDoDiv').on('click', function (event) {
    event.stopPropagation();
});
$(document).on('click', function () {
    $('#cannotDoDiv').hide();//you can now hide the div element because it was not clicked on but a click event fired
});

$(document).on('click.cannotDoDiv', function () {
    $('#cannotDoDiv').hide();//you can now hide the div element because it was not clicked on but a click event fired
    $(this).off('click.cannotDoDiv');
});