jquery点击事件

在下面的代码中，click事件被明确地添加到主体中，所以即使点击按钮外部的body身上，ID为tip1的div也应该以淡入淡出效果关闭。这里的问题是，即使我们点击div本身，div也会关闭。这个任何想法会帮助..jquery点击事件

$(document).ready(function(){ 
      $('.button').getit({speed: 150, delay: 300}); 
    }); 

    $.fn.getit = function(options){ 


    var defaults = { 
     speed: 200, 
     delay: 300 
    }; 

    var options = $.extend(defaults, options); 
    $(this).each(function(){ 

     var $this = $(this); 
     var tip = $('.tip'); 
     this.title = ""; 
     var offset = $(this).offset(); 
     var tLeft = offset.left; 
     var tTop = offset.top; 
     var tWidth = $this.width(); 
     var tHeight = $this.height(); 


    $this.click(

      function() { 

      if($('.tip').hasClass('.active101')) { 
       $('.tip').fadeOut("slow"); 
       $('.tip').removeClass('.active101').addClass('.inactive101'); 

      } 
      else { 
       setTip(tTop, tLeft); 
       $('body').bind('click',function(e) { 
         var parentElement = "button1"; 
         var parentElement2 = "tip1" 
         if(e.target.id != parentElement) { 
          $('.tip').fadeOut("slow"); 
          $('.tip').removeClass('.active101').addClass('.inactive101'); 
         } 

       }); 
       $('.tip').removeClass('.inactive101').addClass('.active101'); 
       setTimer(); 
      } 
      }, 
      function() { 
       if($('.tip').hasClass('.inactive101')) { 
       stopTimer(); 
       tip.hide(); 
       } 
      } 
    ); 

     setTimer = function() { 

      $this.showTipTimer = setInterval("showTip()", defaults.delay); 

     } 

     stopTimer = function() { 
      clearInterval($this.showTipTimer); 
     } 


     setTip = function(top, left){ 
      var topOffset = tip.height(); 
      var xTip = (left-440)+"px"; 
      var yTip = (top-topOffset+100)+"px"; 
      tip.css({'top' : yTip, 'left' : xTip}); 
     } 

    showTip = function(){ 
      stopTimer(); 

      tip.animate({"top": "+=20px", "opacity": "toggle"}, defaults.speed); 
     } 

    }); 
};

<div class="main"> 

     <a href="#" class="button" id="button1"> 
      Click Me! 
     </a> 
     <div class="tip" id="tip1">Hello again</div> 

</div>

来源

2011-03-14 ted

您可以在div上使用jQuery unbind函数（http://api.jquery.com/unbind/）。只需将点击事件详细信息移动到一个已命名的函数中，然后在div上调用解除绑定。 – idbentley

设置您的div 'stopPropagation'

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

来源

2011-03-14 15:58:10

或许你可以单击事件将点击事件绑定到div本身并进行预防t冒泡的点击事件？

$("#div").click(function(e) { 
    e.stopPropagation(); 
});

里克。

来源

2011-03-14 15:59:46

我想他想要点击身体关闭div，但点击div保持打开 - 这是相反的。 – idbentley

@idbentley - 根据我所能读的，他希望div在点击它时保持开放状态 - “这里的问题是，即使我们点击div本身，div也会关闭。” –

，应停止活动的传播
，你应该检查是否有任何元素的儿童被点击（如果单击该元素的一个孩子，该元素将关闭）
你也许应该更仔细选择你的选择器（如果你打算只在一个元素上使用它 - 因为你用一个id（'＃button1'是唯一的）进行验证，你不应该将getit函数绑定到所有带有.button类的元素上'）
```
if(e.target.id != parentElement 
    && $(e.target).parents('#'+parentElement).length == 0) { 
    $('.tip').fadeOut("slow"); 
    $('.tip').removeClass('.active101').addClass('.inactive101'); 
    e.stopPropagation(); 
} 
```

来源

2011-03-14 16:54:27

感谢您的回答。试过所有的人，每个人都工作。但我还发现另一个解决方案，只需添加另一个条件：

if (e.target.id != parentElement && e.target.id != parentElement2) { 
    $('.tip').fadeOut("slow"); 
    $('.tip').removeClass('.active101').addClass('.inactive101'); 
}

来源

2011-03-15 08:01:24 ted

jquery点击事件

回答

相关问题