JavaScript 点击事件的奇葩问题...请指教下

Question

代码：

<button class="del-btn">
    <i class="layui-icon">&#xe640;</i>删除
</button>

$(".del-btn").on("click", function () {
    alert('删除');
});

疑问：

这个按钮的样式如上图，点击文字以外的区域，click事件正常触发，但在文字上点击则无效，起初我以为是jQuery库的问题，于是代码改成了这样：

<button class="del-btn" onclick="alert('删除')">
    <i class="layui-icon">&#xe640;</i>删除
</button>

结果发现还是一样的，烦请遇到过类似问题的朋友解答下，除了文字区域都没问题，点图标都会正常触发click，为什么文字就无效了呢？

Answer 1

还有这种问题？

Answer 2

事件冒泡机制

Answer 3

button和input[type="button"]点击事件绑定是不一样的

Answer 4

 <i class="layui-icon">&#xe640;</i>

这个标签是不是用的绝对定位，层级高导致的

Answer 5

放一个可以测试的连接出来吧，这样描述没有办法让大家来帮你。

或者你可以 console.log(evt.target) 看一下，点击到的是什么