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

How to fire an event only when a particular element is visible

本文关键字：事件 元素 何仅      更新时间：2023-09-26

我有一个警报div，当用户单击链接时会出现。现在我想做的是隐藏div当有人点击它外面时。默认情况下，它附加了一个 fadeoff 事件，但我希望用户能够通过单击其他地方来隐藏该div。

我尝试将$('body').click放入函数调用中，但它不起作用。请帮忙，这是我的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!');
    });

当我删除时：

$('body').click(function(){
    $('#cannotDoDiv').hide();
});

从我的函数$("span#selfLike").click工作正常，否则它不会被触发。

编辑：我想，我明白你在尝试什么..请参阅下面的更新代码

  1. 使用.one仅绑定一次，完成后取消绑定。

  2. 用于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();
    });
});

以下是完整的代码。在此处更新演示 

$(document).ready (function () {
  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').hide();
    $('#cannotDoDiv').html(msg).fadeIn("slow", function () {
         $(document).one('click', function(){
           $('#cannotDoDiv').fadeOut();
        });
    });    
    $('#cannotDoDiv').one('click', function(){
       $('#cannotDoDiv').fadeOut();
    });
 }
$("span#selfLike").click(function(event){
    appendDiv($(this),'You cannot like your own post!');
    event.stopPropagation();
  });
 });

注意：当您单击$('#cannotDoDiv')div 时，此操作也会关闭。 添加单击侦听器，如果您不希望发生这种情况，请停止传播。

尝试$(document).click(function(){而不是身体。

如果

click 事件在 div 元素上触发，则您可以停止传播该事件，使其无法到达document，然后将 click 事件处理程序绑定到隐藏div的 document 元素

： 
$('#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() 相同。

您还可以在 click 事件处理程序触发后从document取消绑定，以停止侦听事件(如果没有必要(：

$(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');
});

由于我为事件使用了命名空间，因此不会删除附加到 document 元素的任何其他事件处理程序。此外，.off()是 jQuery 1.7 中的新功能，在本例中与 .unbind() 相同。

相关文章：