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

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，但我想要的是控制台应该打印100，根据它的父元素div＃wrapper。

Answer 1

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

console.log(e.pageX);

＆＃13;

＆＃13;

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

＆＃13;

#wrapper {
    padding-left:100px;
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

更新：获取div内的位置减去与水平位置的偏移量。

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

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;