run click and double click on a anchor tag

Question

I am trying to perform two actions when a user clicks on a anchor tag. The anchor tag will have a video link. The idea was when a user click once on the anchor tag the url will open in new window and when a user will double click on the tag then it will use the html5 download attribute to initiate the download.

<a class="movie-media-download-link" href="http://example.com/video.mp4" download=""></a>


 jQuery(document).on("click", ".movie-media-download-link", function(e) {
     e.preventDefault();
    // window.location.href = jQuery(this).attr('href');
 });
 jQuery(document).on("dblclick", ".movie-media-download-link", function(e) {
    jQuery('.movie-media-download-link').unbind('click');
 });

When in use prevent default in click then in double click the download attribute of html5 stops working. Even in i unbind the event then also it does not works.

A click is half a double click, and happens first, and always. — adeneo, Nov 16 '16 at 14:27
It would be better if you used separate buttons for these actions. It would also be more intuitive for an end user. — Vaidas, Nov 16 '16 at 14:29
Well you are right about that. But is there a way i could establish this ? — Param Veer, Nov 16 '16 at 14:44

adeneo · Accepted Answer · 2016-11-16T15:54:17.980

2

You'll have to create the doubleclick functionality yourself, and use a delay for the regular click to check if it was actually a double click etc.

jQuery(document).on("click", ".movie-media-download-link", function(e) {
    e.preventDefault();

    var self = this, time = 500;

    if ($(this).data('flag')) {
        clearTimeout($(this).data('timer'));
        var a = document.createElement('a');
            a.href = self.href;
            a.download = "";
            a.click();
    } else {
        $(this).data('timer', setTimeout(function() {
            window.location.href = jQuery(self).attr('href');
        }, time));
    }

    $(this).data('flag', true);

    setTimeout(function() {
        $(self).data('flag', false);
    }, time);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a class="movie-media-download-link" href="http://clips.vorwaerts-gmbh.de/VfE_html5.mp4" download="">Click once to play, twice to download !</a>

edited Nov 16 '16 at 15:54

answered Nov 16 '16 at 14:47

adeneo

312,895
29
395
388

Standard timing for browsers to accept double clicks is 500ms, so it might be worth changing the timers to 500. – bbop99 Nov 16 '16 at 14:52
@Antonvb - Good suggestion, I just set 400ms as it seemed about right, but Windows uses 500ms as the default setting *(it's OS based)* – adeneo Nov 16 '16 at 14:58
Hello Thank your for your reply and your code works perfect but i wanted the download thing to start on double click not single click as per my question. Is that possible ? – Param Veer Nov 16 '16 at 15:46
@ParamVeer - Sure, just swap the code around, I edited the answer. – adeneo Nov 16 '16 at 15:54
@adeneo Thank you so much for your help. Its working perfect. I know download tag wont work on safari. Do you know any solution for that ? – Param Veer Nov 16 '16 at 16:08

score 0 · Answer 2 · answered Nov 16 '16 at 14:51

I would suggest using a timer structure if you really want both events bound on the same element.

Example:

var isDblclick = false;

$('#element').on('click', function() {

    setTimeout(function() {

       if(!isDblclick) {
         //Run your single click here
       }

    }, 500);

});

$('#element').on('dblclick', function() {

    isDblclick = true;
    //Run your dbl click functionality here
    isDblclick = false;

});

Now the delay is not optimal so I suggest you implement a small spinner in the button that signals the user something is happening whilst you decide which action to trigger.

If you don't want the delay I suggest separating the two events on different buttons.

score 0 · Answer 3 · answered Jan 07 '21 at 22:00

Here is what I ended up doing in my project

$("element-selector").click((e) => {
  $this = $(e.currentTarget);

  e.preventDefault();

  setTimeout(() => {
    if ($this.attr("flag") && $this.attr("flag") > 0)
      $this.attr("flag", $this.attr("flag") - 1);
    else {
      // function on single click
    }
  }, 300);
});

$("element-selector").dblclick((e) => {
  $this = $(e.currentTarget);

  e.preventDefault();

  $this.attr("flag", "2");

  // function on double click
});

Its probably not the best way but it works :)

run click and double click on a anchor tag

3 Answers3

Linked