javascript - 避免在绝对定位的子元素上移动鼠标

我试图了解绝对元素上的mousemove事件。

我做了Codepen来演示我想要的。

我需要在#main元素上捕获mousemove，但不需要在绝对定位的任何子元素上捕获它。

HTML：

<div id="main">
  <div class="btn">Click Me</div>
</div>
<div id="output">

</div>

JS：

$(document).ready(function(){

  $('#main').on('mousemove',function( e ) {
  var msg = "mouse move ";
  msg += e.pageX + ", " + e.pageY;
  $( "#output" ).html(msg);
});

});

最佳答案

只需检查事件处理程序中的目标是谁，如果它是您要阻止事件的目标之一，请尽早返回。

在当前配置中，这与检查目标是否确实是#main（又称为jQuery's $event.currentTarget）相同。

$('#main').on('mousemove', function(e) {
  // here we only want the events of #main
  // so any other target is irrelevant
  if (e.target !== e.currentTarget) return;
  var msg = "mouse move ";
  msg += e.pageX + ", " + e.pageY;
  $("#output").html(msg);
});
$('#main').on('mouseout', function() {
  $("#output").html('');
});
$('#main>.btn').on('click', e=> $("#output").html('can still click'));

#main {
  float: left;
  background: yellow;
  width: 400px;
  height: 400px;
  position: relative;
}

#main .btn {
  position: absolute;
  top: 20px;
  left: 20px;
  z-index: 2;
  border: 0;
  background: blue;
  color: #FFF;
}

#main .btn .innerbtn {
  padding: 10px;
}

#output {
  display: inline-block;
  background: #efefef;
  width: 200px;
  position: absolute;
  right: 0;
  pointer-events: none;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="main">
  <div class="btn">
    <div class="innerbtn">Click Me</div>
  </div>
</div>
<div id="output">

</div>

关于javascript - 避免在绝对定位的子元素上移动鼠标，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/54228432/