Почему этот элемент кнопки имеет поведение «щелчка» отличается от поведения div?

Question

Я изменяю код пользовательского интерфейса в соответствии с запросом наших аналитических команд. Все кликабельные элементы должны быть либо 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

Похоже, ваш text-indent:100% является причиной этого. Вместо этого вы можете удалить его и сделать свой текст невидимым с помощью css, например color: rgba(0,0,0,0);. После того, как я сделал это изменение, казалось, что вся площадь поверхности кликабельна.

Если вы сделаете это таким образом, убедитесь, что вы добавили color: rgba(0,0,0,0); также в состояние наведения. Или вы можете просто удалить текст из HTML, если это возможно.

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%; из элементов .close, странное поведение в мобильном телефоне исчезло.

Что пытается сделать это правило?Может ли padding-left работать лучше?(Я предполагаю, что вы пытаетесь избежать размещения текста поверх фонового изображения X icon)