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

Question

js绑定一个事件：

<p class="btn">
    <span class="txt">test</span>
</p>

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

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

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

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

Answer 1

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

Answer 2

a标签设置成块级元素

Answer 3

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