有没有办法禁用某些DOM元素捕获鼠标事件？

Question

有没有办法禁用某些DOM元素捕获鼠标事件？

我有一个元素位于另一个元素之上.我想mouseover用底部元素捕获事件,但是当鼠标光标位于顶部元素上方时,底部元素不接收mouseover事件.

有没有办法禁用顶部元素接收鼠标事件？

Answer 1

在您的示例中,可以使用以下CSS轻松禁用元素接收鼠标事件:

#region2 {
    pointer-events: none;
}

Run Code Online (Sandbox Code Playgroud)

有关更多讨论,请参阅此SO帖子.

+1非常感谢你这个简单易用的解决方案:)它解决了我在`openLayers`上弹出的问题,我在`mouseover`上显示了一个标记. (3认同)

Answer 2

Bra*_*tie 0

这是我能想到的最好的办法。您可能会变得非常详细，但（据我所知）更大的 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);
});

Run Code Online (Sandbox Code Playgroud)

编辑第二个解决方案：

<!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>

Run Code Online (Sandbox Code Playgroud)

归档时间：	15 年，2 月前
查看次数：	15584 次
最近记录：	8 年，7 月前