V
V
Vladimir Yakovlev2018-01-27 13:10:40
JavaScript
Vladimir Yakovlev, 2018-01-27 13:10:40

How to implement double event on one link?

it is required to make 2 different transitions on the link: let's say one click and double click.
it seemed to work before

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

Answer the question

In order to leave comments, you need to log in

1 answer(s)
F
fomenko_alexandr, 2018-01-28
@fomenko_alexandr

The problem here is that the click event fires before the double click. Therefore, I can offer such a construction: here the click event fires with a small delay. This delay is quite enough to understand that there was no double click. If there was still a double click, then it opens the link specified in href, if there was one click, it will redirect to the link from the data-link
Now done for one link, which is located by id, but here it can be easily changed to use classes, and assign handlers to each class, but I showed only a working example

<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>

Didn't find what you were looking for?

Ask your question

Ask a Question

731 491 924 answers to any question