js事件冒泡和捕获问题在block和inline上的不同表现

js绑定一个事件：

<div>
    <span>test</span>
</div>

var btn = document.querySelector('.btn');
btn.addEventListener('click', fn);

function fn(e){console.log(e)}

如果这个btn是一个block类型的按钮，则e.target指向的是btn自己,如果把btn的标签div改成a标签，则这个e.target就指向了内部的span，此时我要想充e对象上获取关于btn的信息，不可能了（不是简单的dom信息，是其他一些定位信息，比如e.layerX,e.x等等），这样一来，获取的e.layerX就不是btn真正的值了，

我的需求就是想在点击btn时，获取准确真实的x,y坐标信息

网友回答：

• 我是好人 2016-6-15 6:22 回复:
  已被采纳

我觉得就是你点到了span标签吧

• 我是好人 2016-6-15 6:25 回复:我是好人

  那你既然把事件绑定到btn，而且你只想用btn，那就不要用e.target啊，就用this就好啊

• 我是好人 2016-6-15 6:49 回复:我是好人

  哦不好意思没太在意，这样一来你可以看看pointer-events这个css属性，给你的.txt设置改属性会有一个穿透效果，就等于你虽然点的是.txt但其实是点在它下面的.btn

• jsoncode 2016-6-16 9:47 回复:我是好人
  btn内部的所有元素设置pointer-events:none;内部元素就不会再捕获到事件了，详细api在这：https://developer.mozilla.org/zh-CN/docs/Web/CSS/pointer-events

---

• 陌萧桀 2016-6-15 5:57 回复:

  a标签设置成块级元素

  • jsoncode 2016-6-15 5:58 回复:陌萧桀
    这个不现实，这只是回避了问题本身

---

• jsoncode 2016-6-16 9:49 回复:

  btn内部的所有元素设置pointer-events:none;内部元素就不会再捕获到事件了，详细api在这：https://developer.mozilla.org/zh-CN/docs/Web/CSS/pointer-events