web-dev-qa-db-ja.com

一部のDOM要素がマウスイベントをキャプチャしないようにする方法はありますか？

別の要素の上にある要素があります。 mouseoverイベントを下の要素でキャプチャしたいのですが、マウスカーソルが上の要素の上にあるとき、下の要素はmouseoverイベントを受信して​​いません。

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

javascriptcssmouseevent
28
tester

あなたの例では、次のCSSを使用して、要素がマウスイベントを受信しないように簡単に無効にすることができます。

#region2 {
    pointer-events: none;
}

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

52
Ryan Rapp

これは私が思いつくことができる最高です。おそらくかなり手の込んだものになるかもしれませんが、（私の知る限り）より大きなz-indexは常にイベントをキャプチャします。ただし、回避することはできますが、イベントが発生しているときに「#region」を覚えておくことができるように、提供された（または提供されていない）オフセット値を使用して別の関数にリファクタリングする方がよいでしょう。 e.targetを使用して、イベントを送信しているものを確認することもできます（その他のプロパティについては、 http://api.jquery.com/category/events/ を参照してください）

$('#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);
});

edit2番目の解決策：

<!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>
0
Brad Christie