Двойное событие на одной ссылке как реализовать?

Question

[Владимир Яковлев]

требуется сделать по ссылке 2 разных перехода: скажем по одному клику и по двойному клику.
раньше вроде работало

<a href='page1.php' 
language=JavaScript 
ondblclick="self.location.href='page2.php'">Ссылка</a>

Comments

[Игорь Мясников]

использовать elem.addEventlistener(событие, функция)

Answer 1

[fomenko_alexandr]

Тут проблема в том, что событие по клику срабатывает раньше даблклика. Потому, могу предложить такую конструкцию: тут событие клика срабатывает с маленькой задержкой. Этой задержки вполне хватает, чтобы понять, что даблклика не было. Если всё таки был двойной клик, то оно открывает ссылку, прописанную в href, если был один клик, то перенаправит на ссылку из data-link
Сейчас сделано для одной ссылки, которая находится по id, однако тут легко можно переделать на использование классов, и присваивать обработчики каждому классу, я же показал только рабочий пример

<a href="http://toster.ru" data-link="http://habrahabr.ru" id="link">Link1</a>

	<script>
		var link = document.getElementById('link');
		var delay = 0.2; //задержка обработки события
		var instance;

		link.addEventListener('click', function(e) {
			e.preventDefault();

			if(instance !== undefined) {
				clearInterval(instance);
			}

			instance = setTimeout(function() {
				window.location.href = e.target.getAttribute('data-link');
			}, delay * 1000);
		})

		link.addEventListener('dblclick', function(e) {
			if(instance !== undefined) {
				clearInterval(instance);
			}
			window.location.href = e.target.href;
		})
	</script>