为什么此按钮元素的“点击”行为与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>

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

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