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

Question

I have an element which is on top of another element. 我有一个元素位于另一个元素之上。 I want to capture the mouseover event with the bottom element, but when the mouse cursor is over the top element the bottom element is not receiving the mouseover events. 我想用bottom元素捕获mouseover事件，但是当鼠标光标位于top元素上方时，bottom元素没有接收mouseover事件。

Is there any way to disable the top element from receiving mouse events? 有没有办法禁用顶部元素接收鼠标事件？

Answer 1

Elements can be easily disabled from receiving mouse events using, in your example, the following CSS: 在您的示例中，可以使用以下CSS轻松禁用元素接收鼠标事件：

#region2 {
    pointer-events: none;
}

For more discussion, see this SO post . 有关更多讨论，请参阅此SO帖子。

Answer 2

This is the best I can come up with. 这是我能想到的最好的。 You could probably get pretty elaborate, but (to my knowledge) the greater z-index is always going to capture the event. 你可能会非常详细，但（据我所知），更大的z-index总是会捕获事件。 You CAN, however, work around it but you're probably better off refactoring in to another function with either a supplied (or unsupplied) offset value so you can keep '#region' in mind when the events are transpiring. 但是，你可以解决这个问题，但你可能最好使用提供的（或不提供的）偏移值重构到另一个函数，这样你就可以在事件发生时记住'#region'。 You can also use e.target to check what is sending you the event (see http://api.jquery.com/category/events/ for more properties) 您还可以使用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);
});

edit second solution: 编辑第二个解决方

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

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

问题描述

2 个解决方案

解决方案1
52 2012-05-04 11:47:11

解决方案2
0 2010-11-29 16:41:20

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

问题描述

2 个解决方案

解决方案1 52 2012-05-04 11:47:11

解决方案2 0 2010-11-29 16:41:20

解决方案1
52 2012-05-04 11:47:11

解决方案2
0 2010-11-29 16:41:20