Почему touchstart отрабатывает через раз?

Question

[Александр Карпов]

В этом примере я печатаю случившееся событие при клике и при таче
https://jsfiddle.net/u5e2dehc/15/
Мне нужно точно знать, произошел ли клик по ссылке мышью или это тач-нажатие. При чем мне неважно, какое это устройство (тач нынче и на десктопах есть)
Однако работает это через раз и зачастую отрабатывает клик на устройствах, где производится тач-касание.

html:
<a href="#" target="blank" >Я ссылка</a>
js:

$('a').on('touchstart click',function(event){
	alert(event.type);
});

Comments

[Falseclock]

по аналогии с keydown и keyup, тач работает также. Вам надо считывать длительность тача и делать preventDefault

[Александр Карпов]

Falseclock: это интересно, можете немножечко пояснить?

[Falseclock]

Александр Карпов: Создаете глобальную переменную, в которую вписываете когда произошел touchstart. В touchend обнуляете данную глобальную переменную. В touchstart ставите event.preventDefault(); В touchend при это делаете проверку, и смотрите время прошедшее до и после нажатия на экран. Если время время слишком короткое, вызываете click()

[Falseclock]

Александр Карпов: хотя я обычно не создаю глобальную переменную, а создаю новое свойство у DOM объекта, в данном случае ваша ссылка и через this ее проверяю.

Answer 1

[Шамсудин Сердеров]

<a class="href_a" href="#" target="blank">link</a>

$('.href_a').on('touchstart click', function(e) {    
    e.stopPropagation(); //stops propagation
    if(e.type == "touchstart") {
        // Обрабатывать событие touchstart.
    } else if(e.type == "click") {
        // Обработка события click.
    }
});

Comments

[Александр Карпов]

я понимаю как это должно работать, но на мобильных телефонах это не работает. понимаете?
Иногда он определяет событие как click, особенно если это ссылка.

Answer 2

[Falseclock]

https://jsfiddle.net/Falseclock/47jcvty9/

click - это нажал мышкой и отпустил и в этот ивент входят два ивента: mousedown и mouseup

touchstart и tachend - это тоже самое что mousedown и mouseup

document.getElementById('myhref').ontouchstart = function (event) 
	{
  	var d = new Date();
  	this.touchStartTime = d.getTime();
  	event.preventDefault();
  }
  
document.getElementById('myhref').ontouchend = function (event) 
	{
  	var d = new Date();
  	if ((d.getTime() - this.touchStartTime) < 1000 ) {
  	  	this.click();
  	}
  }

Comments

[Александр Карпов]

нет проблем со срабатыванием клика. Есть проблема с тем, что на мобильном устройстве событие ontouchstart не отрабатывает иногда. Обработчик не срабатывает вовсе, вы попробуйте. Мы на андроидах тестили, и эта проблема воспроизводится.
вот немного упросил ваш код, как вы думаете, всегда должна отрабатывать?
https://jsfiddle.net/47jcvty9/3/
А отрабатывает не всегда. Поэтому и в моём примере, который указан в вопросе существует такая проблема.

[Falseclock]

Александр Карпов: у меня на андроиде все прекрасно работает... как только дотрагиваюсь 0 сразу выскакивает алерт

[Александр Карпов]

Falseclock: вы понажимайте, будут осечки

[Falseclock]

Александр Карпов: нет осечек. Браузер хром.