text-indent 导致点击事件失效？

问题

项目中一个弹框的关闭按钮，按钮有背景图片，文字使用缩进隐藏：

<style>
  .modal-close {
    width: 20px;
    height: 20px;
    background-image: xxx;
    text-indent: 100%;
    overflow: hidden;
  }
</style>

<div class="modal">
  <div class="modal-header">
   <button class="modal-close" onclick="onClose()">关闭</button>
  </div>
</div>

<script>
  function onClose() {
    console.log('关闭');
  }
</script>

问题是什么呢？

点击没有效果。仔细观察，似乎是按钮右边一个区域无法点击，而左上的区域即使超出了元素范围也可以点击。

尝试

为什么 text-indent 使用值 100% 呢，因为用的 tailwindcss，一开始发现 100% 似乎好写一点，class="indent-[100%]"。

MDN 中：

<percentage>：Indentation is a <percentage> of the containing block's width.

缩进包含容器宽度的百分比。理论上没问题啊，只要能隐藏文本。

使用 text-indent: -9999px;:

.modal-close {
  text-indent: -9999px;
}

可以解决问题。

不使用 button 元素：

<div class="modal-close" onclick="onClose()">关闭</div>

也可以解决问题。

或者根本不用写文字和使用 text-indent。

但是这个现象到底是什么原因导致的呢？

一个 demo

为了研究这个问题，给出一个具体的 demo：

codepen.io/zangbianxue…

红色按钮，靠右边大致红框的区域无法触发点击事件。

打开网页，打开控制台，打开 toggle device toolbar，点击第一个按钮，控制台输出 111，小心的把鼠标移动到按钮右侧的边缘附近，就会发现点击失效。而 div 元素没有此现象。

探究

Chrome 模拟移动设备

在探究的过程中，发现，只有在 Chrome 模拟移动设备中，才会出现这个问题，正常 PC 模式下没问题。按钮的任何区域都可以点击。

模拟移动设备似乎还有一个问题，Chrome 似乎为了方便移动端点击事件，给元素增加了一个点击范围，也就是说，即使超出了元素范围一点点，也是可以点击的。经过尝试，这个距离大概是 15px。

这里反映了一个同样的问题：html elements are picking click events outside their bounds

我搜了一下，却没有找到相关的说明（不知道什么原因）。却有很多 “Emulate Touch Events in Chrome” 的说明，找了半天，似乎当前 Chrome 已经没有了这个设置：

另外这里有个相关问题：Wrong clickable area of a button on mobile

以上，只是说明 Chrome 模拟移动设备的这个特性。

overflow: hidden

当删除 overflow: hidden; 时，是没有问题的。说明是文本缩进和超出隐藏共同影响了点击范围。

在我们的 demo 中，text-indent 和 overflow 让文本的一部分隐藏了，一部分仍然在元素范围中。

元素的点击范围应该只是元素本身？

还是说 button 比较特殊，它的点击和文本有关系？

不同大小的元素比较

为了便于观察，扩大点击的范围，同时重置了一些 button 的默认样式：

<style>
  .close {
    text-align: left;
    padding: 0;
    padding-block: 0;
    padding-inline: 0;
    writing-mode: horizontal-tb;
    word-wrap: break-word;
    margin: 15px;
    border: 1px solid red;
    width: 300px;
    height: 300px;
    text-indent: 300px;
    /* text-indent: -9999px; */
    overflow: hidden;
  }
</style>

<div class="close-wrapper">
  <button class="close" onclick="onClose()">关闭</button>
</div>

放大元素之后发现，不可点击的范围只是右边的一个小区域。

隐藏和扩大的可点击范围相结合

会发现，整个绿色的区域基本上都可以点击，除了大概蓝色的区域。不确定这个区域的具体范围，但是这个区域不就是缩进的文本周围吗？？

就是说，“关”字虽然被隐藏了，就不能响应点击事件了，但是它又影响了什么？

经过反复测试，text-indent: 298px; text-indent: 295px; text-indent: 320px;

当 text-indent: 298px;：

蓝色区域意料中的不能点击，但是黄色区域有一个小小的区域可以点击！

为了说明，特地录了个视频（结果还要上传西瓜视频）：

反复尝试之后，似乎终于发现了问题所在：

• Chrome 模拟移动设备为元素增加了点击范围，大概 15px;
• 所以 button 元素周围 15px 可点击；
• text-overflow: hidden; 隐藏文本，隐藏的部分当然不可点击，即使在 button 周围可点击范围；
• 隐藏的部分也有一个扩大点击范围，因为隐藏的部分不可点击，它的扩大范围也不可点击，即使在元素本身的可点击范围之内；
• 点击和不可点击（overflow-hidden）相互叠加之后，不可点击范围覆盖点击范围；

因此隐藏的文本“关”有一个扩大的不可点击范围，覆盖在了 button 按钮之上，所以造成了这种现象。

当 text-indent: 320px;：

为了验证这种想法，当 text-indent: 320px; 时，应该 button 右侧大概 5px 可以点击。当当 text-indent: 315px;时，应该红框之间都不能点击。

但是在实际测的过程，还是有些不合理。当然扩大的点击范围值只是我的猜测，而且，这一切，都是我的假设和推理。

总结

回到项目中的问题，我的关闭按钮似乎是一整个都不能点击？原因是我的按钮很小，不是demo中的这种，当使用 text-indent: 100%; 之后，文本会换行，换行之后的文本（“闭”）也不在 button 之内，也属于被隐藏的文本，所有隐藏的文本共同对 button 施加影响：

所以即使正向缩进更多 text-indent: 9999px;，也仍然影响按钮的大部分区域：

最后

虽然想要搞清楚，真实的实现原理还是不知道，苦于这方面的文档不知道怎么找。希望有看到和了解的，可以分享一下~