ネストされたマウスイベントでのJQueryの問題

Question

これら3つのイベントを同時に使用すると問題が発生しているようです。

私には、mouseup、mousedown、およびmousemoveがバインドされた大きなdivがあります。この大きなdivの中には、いくつかの小さなdivがあります（これはクリック可能です）。私はclickable要素がより大きなdivの子であると付け加えるべきです。

問題は、clickイベントが機能していないようです。しかし、私が他のマウスイベントをコメントアウトすると、正常に動作します。

クリックは実際はマウスとマウスの組み合わせなので、ここでは何らかのイベントの競合が起こっていると推測しています。親divのイベントで

<script type="text/javascript"> 
      $(document).ready(function() { 
       //Create tooptips for existing zones 
       $('.oldBox').tipsy({ 
        title: 'data-callrange', 
        gravity: 'sw' 
       }); 

       var x1,y1; 
       $('.openTab .img_container').live('mousedown', function(e) { 
        e.preventDefault(); 


       }); 

       $('.openTab .img_container').live('mousemove', function(e) { 

       }); 

       //Process just created box 
       $(document).mouseup(function() { 

       }); 

       $('.oldBox').live('click', function(){ 
        $('#mouse_pos').html('You clicked '+ $(this).attr('data-callrange')); 
       }); 
      }); 
    </script> 

Answer 1

、あなたがクリックされた要素（イベントターゲット）は実際には親のdivはなく、子のdivたことを確認するためにチェックすることができます。例としてthis fiddleを参照してください。

if(event.target.id == "i_am_a_big_div_with_three_events") { 
    //Do stuff 
} 

そして、通常通りの子供divにあなたのクリックイベントを添付：親divのためのイベントハンドラで

は、のようなものを使用します。