используйте ontouchstart() или onclick() в зависимости от устройства

во-первых, я знаю, что есть несколько способов обойти это, например, создание ontouchstart и onclick то же самое. Но есть ли способ проверить, есть ли у пользователей смартфон/планшет/устройство с сенсорным экраном по сравнению с ноутбуком или компьютером, и изменить функцию ontouchstart на click? Вот пример одного из способов решения:

var touchScreen = false;
var touches = 0;
var clicks = 0;

document.addEventListener("touchstart", function() {
  touchScreen = true;

  function touch() {
    touches++;
    console.log(touches);
    console.log(clicks);
    document.getElementById("clicks").innerHTML = "touches = " + touches + ", clicks = " + clicks;
  }
  touch();

});

function click() {
  if (touchScreen === false) {
    document.addEventListener("click", function(event) {
      clicks++;
      console.log(touches);
      console.log(clicks);
      document.getElementById("clicks").innerHTML = "touches = " + touches + ", clicks = " + clicks;
    });
  }
}
click();
html {
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}
<h1><span id="clicks"></span></h1>

Этот фрагмент кода показывает, что я «определил», является ли это устройством с сенсорным экраном или нет, и выполнил что-то на основе этой информации. (К вашему сведению, когда вы запускаете фрагмент кода, обязательно нажмите / коснитесь пустого места, чтобы получить вывод)

Однако я не хочу этого делать, потому что у меня много функций, которые полагаются на такие вещи, как <button onclick="click()">click</button>. Я хотел бы найти простой способ просто изменить часть onclick на ontouchstart, если это устройство с сенсорным экраном. Я использую JavaScript только для написания сценариев, спасибо!

Кроме того, если вы считаете, что нет способа сделать это, будет ли лучший способ проверить и выполнить код (с помощью щелчка или касания) в зависимости от того, есть ли у пользователя сенсорный экран или другое устройство?

редактировать:

Обычно я просто нажимаю, но некоторые элементы на странице, вероятно, будут нажиматься с высокой скоростью или, по крайней мере, быстрее, чем 300 мс.


javascript html onclick ontouch
person Fred Fredwerd    schedule 10.12.2017    source источник
comment
Мобильные браузеры должны запускать событие клика через 300 мс; эта скрипта работает как в настольном, так и в мобильном Firefox, поэтому ваши атрибуты onclick должны работать независимо. Возможно, вам нужен fastclick для безопасного устранения задержки в 300 мс.   -  person caseyWebb    schedule 10.12.2017
comment
это правильно, я хочу быстро нажать, ха-ха, я думаю, это именно то, что мне нужно, я посмотрю на это.   -  person Fred Fredwerd    schedule 10.12.2017
comment
Однако я все же хотел бы увидеть способ либо улучшить мой код выше, либо ответить на мой вопрос более простым решением, если это возможно.   -  person Fred Fredwerd    schedule 10.12.2017

Ответы (1)


arrow_upward
0
arrow_downward

Вы можете инициировать событие click для touchstart, как таковое...

document.addEventListener('touchstart', (e) => {
  // prevent duplicate clicks
  e.preventDefault()

  e.target.dispatchEvent(new Event('click'))
))

Однако обратите внимание, что это исключительно хрупкая информация, поскольку данные об объекте события — e — не будут распространяться на события кликов.

person caseyWebb    schedule 10.12.2017