HTML表格th绑定点击事件后内部i箭头图标无法触发点击问题

这个问题是前端实现可排序表格时的高频问题，核心原因基本都是以下两类：

• 最常见的情况：你在sortable_table_onclick处理函数中写了严格的事件源匹配逻辑，比如类似if(e.target !== this) return的判断。点击th内的文本时，事件源e.target就是th元素本身，排序逻辑可以正常执行；但点击内部的i标签箭头时，事件源是i元素，不是绑定事件的th，直接被校验逻辑拦截，表现为箭头区域点击无反应。
• 小概率情况：全局其他CSS给i标签设置了冲突的指针事件规则，或者有透明的定位元素覆盖在箭头区域拦截了事件；也有可能是其他代码给i标签绑定了点击事件并调用e.stopPropagation()阻止了事件冒泡。

两种方案二选一即可，优先推荐第一种，改动量最小：

方案1：新增一行CSS（推荐） #

给箭头i标签设置pointer-events: none，让i元素本身不接收任何鼠标事件，点击箭头时事件会直接落到父级th上，和点击th文本的表现完全一致，不需要改动现有JS逻辑：

i {
    border: solid black;
    border-width: 0 3px 3px 0;
    display: inline-block;
    padding: 3px;
    /* 新增下方这一行 */
    pointer-events: none;
}

方案2：调整JS事件校验逻辑 #

如果不想修改CSS，可以调整事件处理函数的判断规则，允许th的子元素触发排序逻辑：

function sortable_table_onclick(e) {
    // 替换原来的e.target严格等于this的判断，改为判断th是否包含事件源
    if (!this.contains(e.target)) return;

    // 下方保留你原有的排序逻辑即可
    // const colIndex = Number(this.id.split('-')[1]);
    // 执行对应列的排序、箭头方向切换逻辑...
}

如果改完还是不生效，检查下是否有其他代码给i标签或者th内的其他元素绑定了点击事件并阻止冒泡，去掉stopPropagation()调用即可。

内容的提问来源于stack exchange，提问作者Axel Boström