运行单击并双击锚标记 [英] run click and double click on a anchor tag

问题描述

当用户单击锚标记时，我尝试执行两个操作.锚标签将有一个视频链接.这个想法是当用户点击一次锚标签时，url 将在新窗口中打开，当用户双击标签时，它将使用 html5 下载属性来启动下载.

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');
 });

在使用时阻止默认点击然后双击html5的下载属性停止工作.即使在我解除绑定事件时它也不起作用.

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.

推荐答案

您必须自己创建双击功能，并为常规单击使用延迟以检查它是否实际上是双击等.

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>

这篇关于运行单击并双击锚标记的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！