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

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

最佳答案

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