マウスイベントのキャプチャからDOM要素を無効にする方法はありますか？

私は別の要素の上にある要素を持っています。下の要素でmouseoverイベントをキャプチャしたいですが、マウスカーソルが上の要素の上にある場合、下の要素はmouseoverイベントを受信していません。マウスイベントのキャプチャからDOM要素を無効にする方法はありますか？

マウスイベントを受け取らないように上部要素を無効にする方法はありますか？

出典

2010-11-29 tester

これを何度も読んだことがありますが、依頼していることはまだ分かりません。「初期要素」のようなあいまいな用語を使用するのではなく、提供した例を使用して、行動をどのようにしたいのかと言うことができますか？＃region2がマウスイベントを起こすのを避けるつもりですか、それともバイパスしたのでしょうか？ **編集**私は今それを得ると思う、あなたは＃region2の＃マウスのオーバーラップを妨げるのを止めたいのですか？（申し訳ありませんが、コーヒーの剥奪） –

はい、ブラッドあなたは正しいです、あなたの注意をいただきありがとうございます！ – tester

[HTML/CSSの重複の可能性：クリックに対してdivを「見えない」？]（https://stackoverflow.com/questions/3538489/html-css-make-a-div-invisible-to-clicks） – vaxquis

これは私が思いつくことができる最高です。あなたはおそらくかなり精巧になるかもしれませんが、私の知る限り、より大きなZインデックスはいつもイベントをキャプチャしようとしています。しかし、それを回避することはできますが、イベントが発生しているときに「#region」を維持できるように、別の関数にリファクタリングする方が良いでしょう（または供給されていないオフセット値）。

<!DOCTYPE html> 
<html> 
<head> 
    <style> 
    #region { width:220px; height:170px; margin;10px; margin-right:50px; 
     background:yellow; border:2px groove; float:right; } 
    #region2 { 
    background-color: white; 
    float:right; 
    position: relative; 
    right: -150px; top: 50px; 
    width: 100px; height: 100px; 
    border: 1px solid 
    } 

    #region3 { 
    width:30px; 
    height: 30px; 
    background-color: brown; 
    } 

    p { margin:0; margin-left:10px; color:red; width:220px; 
     height:120px; padding-top:70px; 
     float:left; font-size:14px; } 
    span { display:block; } 
    </style> 
    <script src="http://code.jquery.com/jquery-1.4.4.js"></script> 
    <script type="Text/javascript"> 
    jQuery.extend({ 
     MousemoveElement: function(needle,onActivation){ 
     var elList = needle; 
     $('*').mousemove(function(e){ 
      $('#outside').html('<b>Outside:<b/><br />target: '+e.target.tagName+' ['+e.target.id+']<br />client: '+e.clientX+','+e.clientY+'<br />page: '+e.pageX+','+e.pageY); 
      $('#inside').html(''); 

      if (onActivation==null) 
      return;// only search if we need to 

      $(needle).each(function(){ 
      $('#meta').html('outside'); 
      var pt = { x: e.pageX, y: e.pageY }; 
      var ext = { 
       left: $(this).offset().left, 
       right: ($(this).offset().left + $(this).innerWidth()), 
       top: $(this).offset().top, 
       bottom: ($(this).offset().top + $(this).innerHeight()) 
      }; 
      $('#meta').html('<b>PT:</b> '+pt.x+','+pt.y+'<br /><b>EXT:</b> ('+ext.left+','+ext.top+';'+ext.right+','+ext.bottom+')'); 
      if ((pt.x >= ext.left) && (pt.x <= ext.right) && (pt.y >= ext.top) && (pt.y <= ext.bottom)){ 
       $('#meta').html('GOOD'); 
       onActivation(e,$(this)); 
      } 
      }); 
     }); 
     } 
    }); 

    $(document).ready(function(){ 
     $.MousemoveElement('#region',function(e,element){ 
     $('#inside').html('<b>Inside:<b/><br />target: '+element.attr('id')+'<br />client: '+e.clientX+','+e.clientY+'<br />page: '+e.pageX+','+e.pageY); 
     $('#outside').html(''); 
     }); 
    }); 
    </script> 
</head> 
<body> 
    <p> 
     Try scrolling too. 
     <span id="meta">Move the mouse over the div.</span> 
     <span id="outside">&nbsp;</span> 
     <span id="inside">&nbsp;</span> 
    </p> 

    <div id="region"><div id="region3"></div></div> 
    <div id="region2"></div> 
</body> 
</html>

出典

2010-11-29 16:41:20

Bradお手伝いをしていただきありがとうございます！しかし、私は論理が$（ '地域'）の内部にある必要があります。 $（ '＃region2'）; $（ '＃region2'）のようになります。 – tester

jQuery.fn.CustomMousemove = function（myTarget）{$（this）.mousemove（function（e）{...}）;独自のjQuery関数を作成することをお勧めします。 ...} 'は、選択されたものに基づいて自分のアクションを処理します。次に、すべてのコードを1つの決定的な領域に置いて、 '$（ '＃region、＃region2'）を呼び出して、CustomMousemove（ '＃region'）; –

さて、ブラッド、もう一度ありがとう。実際の問題は、$（ '＃region'）を作ることです。mousemoveは、何千もの絶対的に配置されたdivの後ろにあっても、マウスがその本体上を移動するたびに実行されます...しかし、それを行う手段はないと思います私は解決策を知らないかもしれません... – tester

Elementsは簡単に受信から無効にすることができます。また、編集第二の溶液

$('#region2').mousemove(function(e){ var regionPos = $('#region').position(); var region2Pos = $('#region').position(); var offset = { left: region2Pos.left - regionPos.left, top: region2Pos.top - regionPos.top }; var pageCoords = "(" + e.pageX + ", " + e.pageY + ")"; var clientCoords = "(" + (e.clientX + offset.left) + ", " + (e.clientY + offset.top) + ")"; $("span:first").text("(e.pageX, e.pageY) - " + pageCoords); $("span:last").text("(e.clientX, e.clientY) - " + clientCoords); });

（複数のプロパティのためのhttp://api.jquery.com/category/events/を参照してください）あなたのイベントを送信しているかどうか確認するためにe.targetを使用することができますあなたの例では、次のCSSを使用したマウスイベント：

#region2 { pointer-events: none; }

詳細については、 this SO postを参照してください。

出典

2012-05-04 11:47:11

+1このすてきで簡単な解決法をありがとうございました:)私は 'mouseover'にマーカを表示する' OpenLayers'のポップアップで私の問題を解決しました。 – Boro

これが見つかるまで、jQuery/cssライブラリのすべてを試しました。魅力的な仕事をしました。 –

注：IE/Operaはまだサポートされていません。http://caniuse.com/pointer-events –

マウスイベントのキャプチャからDOM要素を無効にする方法はありますか？

答えて

関連する問題