为什么这个按钮元素的“点击”行为与 div 不同？

Question

我正在根据我们的分析团队的要求修改 UI 代码。所有可点击元素必须是a 或button。

我已经覆盖了 button 和 a 样式，因此它们看起来没有任何不同。在桌面浏览器中，它们的行为似乎也没有什么不同。

但是从开发工具打开chrome“设备仿真”，你可以看到button和a元素有不同的行为。它们各自的目标点击区域似乎更小，你必须直接点击 svg "X" 而不是块级元素的任何部分。

我尝试了a 和button 元素。我还在 jsfiddle 中重新创建了这个问题。

这个 jsfiddle 重现了这个问题（在 chrome 中的移动设备模拟器模式下测试）https://jsfiddle.net/8jze13t0/1/

// script.js
let i = 0;
const closeBtns = document.querySelectorAll('.close');
const clickCount = document.querySelector('.click-count');

Array.from(closeBtns).forEach(btn => btn.addEventListener('click', (e) => {
  e.preventDefault();
  i++;
  clickCount.innerText = i;
}))


clickCount.innerText = i;

body {
  background: darkBlue;
  color: white;
  font-family: sans-serif;
}

.close {
  margin-top: 10px;
  white-space: nowrap;
  text-indent: 100%;
  overflow: hidden;
  background: url("data:image/svg+xml;charset=utf-8,%3Csvg width='20' height='20' viewBox='0 0 20 20' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M10.4809 10.0128L19.9119 0.579492C20.0423 0.479492 20.0423 0.246029 19.9119 0.112695C19.7819 -0.020638 19.5709 -0.020638 19.4406 0.112695L10.0096 9.54564L0.578599 0.112695C0.448599 -0.020638 0.237599 -0.020638 0.107266 0.112695C-0.0227344 0.246029 -0.0227344 0.479492 0.107266 0.579492L9.53826 10.0128L0.107266 19.4457C-0.0227344 19.5794 -0.0227344 19.8128 0.107266 19.9128C0.172599 19.9795 0.257599 20.0128 0.342933 20.0128C0.428266 20.0128 0.513599 19.9795 0.578599 19.9128L10.0096 10.5128L19.4406 19.9128C19.5059 19.9795 19.5909 20.0128 19.6763 20.0128C19.7616 20.0128 19.8469 19.9795 19.9119 19.9128C20.0423 19.8128 20.0423 19.5794 19.9119 19.4457L10.4809 10.0128Z' fill='white'/%3E%3C/svg%3E");
  width: 20px;
  height: 20px;
  margin-right: 16px;
  display: block;
}

button {
  outline: 0;
  border: 0;
  background: none;
  padding: 0;
  font-family: inherit;
  font-style: inherit;
  cursor: pointer;
}

<p>
  Click Count:
  <span class="click-count">
  </span>
</p>

<p>
  First Example With &#96;div:&#96;
  <div class="close">
    Close me
  </div>
</p>


<p>
  Second Example With &#96;button&#96;
  <button class="close">
Close me
</button>
</p>

<p>
  Third Example With &#96;a&#96;
  <a href="#close" class="close">
Close me
</a>
</p>

这是问题的屏幕截图（带注释）：

我希望能够单击移动模拟器中块级元素内的任何位置并触发事件处理程序。

Answer 1

删除文本和与之关联的样式

删除这些额外的规则

white-space: nowrap;
text-indent: 100%;
overflow: hidden;

同样从html中删除文本，如果你不打算使用它为什么还要它

如果你想要屏幕阅读器的文本，你可以在元素上使用aria-label="whatever"

<a href="whatever" aria-label="whatever label">

Answer 2

我从 .close 项目中删除 text-indent: 100%; 后，移动设备中的奇怪行为就消失了。

该规则试图做什么？ padding-left 可以更好地工作吗？ （我假设您试图避免将文本放在背景图像 X 图标的顶部）

Answer 3

试图找出具体的问题。不知道你想在视觉上实现什么 - 虽然我确实注意到了这部分：

它们各自的目标点击区域似乎更小，你必须 直接点击 svg "X" 而不是块级别的任何部分 元素。

部分原因是“a”和“button”元素被称为（默认情况下）“内联”显示元素。也许尝试添加这样的样式定义：

a, button {
display: block;
}

这应该允许 a/button 元素占用更多空间并拥有更多的可点击区域，然后只有一个可点击区域等于 a/button 元素内的内容。如果你想强制最小宽度，你可能还想设置这样的东西：

a, button {
display: block;
min-width: 100px; 
}

除此之外，可能会提供一个示例，说明它以前的样子 - 或者您希望它的外观/行为如何？这一切都还假设您没有使用任何 CSS 框架（vanilla CSS）？

Answer 4

您的text-indent:100% 似乎是造成这种情况的原因。而不是这样做，您可以删除它并使用 css 使您的文本不可见，例如 color: rgba(0,0,0,0);。一旦我进行了更改，它似乎使整个表面区域都可以点击。

如果您这样做，请确保将color: rgba(0,0,0,0); 也添加到悬停状态。或者，如果可以的话，您可以直接从 html 中删除文本。