运行单击并双击锚标记答案

【问题标题】：run click and double click on a anchor tag运行单击并双击锚标记
【发布时间】：2017-03-30 19:08:29
【问题描述】：

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

<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 的下载属性停止工作。即使在我取消绑定事件时它也不起作用。

【问题讨论】：

点击是半双击，并且总是先发生。
最好为这些操作使用单独的按钮。对于最终用户来说，它也会更直观。
你说得对。但是有没有办法我可以建立这个？

标签： javascript jquery html

【解决方案1】：

这是我最终在我的项目中所做的事情

$("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
});

它可能不是最好的方法，但它有效:)

【讨论】：

【解决方案2】：

您必须自己创建双击功能，并为常规单击使用延迟来检查它是否真的是双击等。

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>

【讨论】：

浏览器接受双击的标准时间是 500 毫秒，因此可能值得将计时器更改为 500。
@Antonvb - 好建议，我只是设置了 400 毫秒，因为它似乎是正确的，但 Windows 使用 500 毫秒作为默认设置 （它基于操作系统）
您好，感谢您的回复，您的代码运行良好，但根据我的问题，我希望通过双击而不是单击开始下载。这可能吗？
@ParamVeer - 当然，只需交换代码，我编辑了答案。
@adeneo 非常感谢您的帮助。它的工作完美。我知道下载标签在 safari 上不起作用。你知道有什么解决办法吗？

【解决方案3】：

如果你真的希望两个事件都绑定在同一个元素上，我建议使用计时器结构。

例子：

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;

});

现在延迟不是最佳的，所以我建议您在按钮中实现一个小微调器，在您决定触发哪个操作时向用户发出信号通知。

如果您不想延迟，我建议将两个事件分开放在不同的按钮上。

【讨论】：