Is there any way to disable some DOM element from capturing mouse events?_问答_开发者

Is there any way to disable some DOM element from capturing mouse events?

开发者 https://www.devze.com 2023-01-27 05:54 出处：网络

I have an element which is on top of another element. I want to capture the mouseover event with the bot开发者_JAVA技巧tom element, but when the mouse cursor is over the top element the bottom element

I have an element which is on top of another element. I want to capture the mouseover event with the bot开发者_JAVA技巧tom element, but when the mouse cursor is over the top element the bottom element is not receiving the mouseover events.

Is there any way to disable the top element from receiving mouse events?

Elements can be easily disabled from receiving mouse events using, in your example, the following CSS:

#region2 {
    pointer-events: none;
}

For more discussion, see this SO post.

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. 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. You can also use e.target to check what is sending you the event (see http://api.jquery.com/category/events/ for more properties)

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