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點擊事件

回答

相關問題