Question

我试图在用户点击锚标记时执行两个操作。锚标记将具有视频链接。这个想法是当用户在锚标签上点击一次时，网址将在新窗口中打开，当用户双击标签时，它将使用html5 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的下载属性停止工作。即使在我解开事件之后，它也无效。

Answer 1

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

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>

Answer 2

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

示例：

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;

});

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

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

Answer 3

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

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

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

单击并双击锚标记

3 个答案: