jqueryクリックイベント

Question

次のコードでは、クリックイベントがボディに明示的に追加されているため、ボタンの外側をクリックしてもbody上で言うように、IDのtip1のdivはフェード効果で閉じる必要があります。 ここで問題となるのは、div自体をクリックしてもdivが閉じるということです。この上の任意のアイデアが役立つだろう ..

$(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> 

Answer 1

'のstopPropagation' おそらく

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

Answer 2

あなたができるまで、あなたのdivにクリックイベントを設定します。クリックイベントをdiv自体にバインドしてprevenするクリックイベントがバブルアップしていませんか？

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

リック。

Answer 3

1. あなたは要素の子のいずれかがクリックされたかどうかをチェックする必要があり、イベントの伝播
2. を停止する必要があります（あなたはその要素の子をクリックすると、要素が閉じてしまう）

3. あなたはおそらくもっとあるべきセレクタに注意してください（一意の '＃button1'というIDで検証しているため、これを1つの要素にのみ使用する場合は、クラス '.buttonを持つすべての要素にgetit関数をバインドしないでください） '）

   if(e.target.id != parentElement 
       && $(e.target).parents('#'+parentElement).length == 0) { 
       $('.tip').fadeOut("slow"); 
       $('.tip').removeClass('.active101').addClass('.inactive101'); 
       e.stopPropagation(); 
   } 
   

Answer 4

あなたの答えに感謝します。彼らのすべてと一緒に試して、それぞれ働いた。

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