Question

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

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

但是从开发工具中打开镶边的“设备仿真”，您会看到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

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

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

Answer 3

试图找出具体问题。不确定您要在视觉上实现什么-尽管我确实注意到了这一部分：

它们各自的目标点击区域似乎较小，因此您必须直接击中svg“ X”而不是方块等级的任何部分元素。

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

a, button {
display: block;
}

这应该允许a / button元素占用更多空间并具有更多可点击区域，然后才具有等于a / button元素内部内容的可点击区域。如果要强制最小宽度，则可能还需要设置以下内容：

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

除此之外，还可能提供一个示例，说明以前的样子-或您希望它看起来/样子？这还都是假设您不使用任何CSS框架（普通CSS）吗？

Answer 4

看来是您的text-indent:100%造成的。除了这样做，您可以将其删除并使用color: rgba(0,0,0,0);这样的CSS使您的文本不可见。一旦进行了更改，似乎可以使整个表面积都可单击。

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

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

4 个答案: