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

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

Answer 3

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

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

Answer 4

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

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