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

时间:2012-01-28 19:55:45

标签: javascript jquery javascript-events

我有一个提醒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正常工作,否则它不会被解雇。

2 个答案:

答案 0 :(得分:1)

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

  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();
        });
    
    });
    
  3. 以下是完整的代码。此处更新了DEMO

    $(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时,这也会关闭。如果您不希望发生这种情况,请添加单击侦听器和stopPropogation。

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

答案 1 :(得分:0)

如果click元素在div元素上触发,它可以阻止document事件的传播,因此它不会到达click,然后绑定document事件隐藏div的{​​{1}}元素的处理程序:

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