gpt4 book ai didi

javascript - 运行单击并双击 anchor 标记

转载 作者:行者123 更新时间:2023-11-30 15:42:10 26 4
gpt4 key购买 nike

当用户点击 anchor 标记时,我试图执行两个操作。 anchor 标签将有一个视频链接。这个想法是当用户点击一次 anchor 标签时,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的下载属性停止工作。即使在我取消绑定(bind)事件时它也不起作用。

最佳答案

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

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>

关于javascript - 运行单击并双击 anchor 标记,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/40634608/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com