javascript - 如何排除从它的子元素中冒出的事件？

Question

<div id="wrapper">
    <div>
        <div id="a">"hahah"</div>
    </div>
</div>

#wrapper {
    padding-left:100px;
}

$('#wrapper').on('mousemove', (e)=>{

    console.log(e.offsetX);
})

例如，当鼠标从左到右移动到元素 div#a 上时，控制台将打印 0，但我想要的是控制台应根据其父元素 div#wrapper 打印 100。

Answer 1

获取event.pageX属性获取基于整个文档的相对位置。

console.log(e.pageX);

$('#wrapper').on('mousemove', (e) => {
  console.log(e.pageX);
})

#wrapper {
    padding-left:100px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="wrapper">
  <div>
    <div id="a">"hahah"</div>
  </div>
</div>

---

更新:要获取 div 中的位置，请从水平位置减去其偏移量。

$('#wrapper').on('mousemove', (e) => {
  console.log(e.pageX - $('#wrapper').offset().left);
})

var $wrapper = $('#wrapper');
$wrapper.on('mousemove', (e) => {
  console.log(e.pageX - $wrapper.offset().left);
})

#wrapper {
  padding-left: 100px;
  margin-left:100px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="wrapper">
  <div>
    <div id="a">"hahah"</div>
  </div>
</div>