javascript - 防止鼠标按下延迟后发生链接事件

标签 javascript jquery

我正在开发一个功能,以便当用户单击并按住链接时,该链接不会将用户发送到适当的链接。但是,我使用的功能不起作用。我想要的是用户单击链接,如果他们按住链接超过一秒,该链接将不再有效,并且不会触发任何事件。经过一段时间的查看,我找不到代码有什么问题。所以我的问题是,我做错了什么? http://jsfiddle.net/rQP6g/2/

<a href="www.google.com" >link</a>

<script>
var timeoutId = 0;
    $('a').mouseup(function() {
    timeoutId = setTimeout(function(e) {  
    e.preventDefault();
e.stopPropagation();
}, 1000);
}).bind('mouseup', function() {
clearTimeout(timeoutId);
});
</script>

最佳答案

这应该有效:http://jsfiddle.net/rQP6g/18/

JS 如下所示:

var mousedownTime;

$('a').mousedown(function(e) {
    mousedownTime = new Date();
}).click(function(e) {
    // If the mouse has been hold down for more than 1000 milliseconds ( 1 sec. ), cancel the click
    if(Math.abs(new Date() - mousedownTime) > 1000)
        e.preventDefault();
});​

基本思想是捕获按下鼠标按钮的时间 - 然后,当释放鼠标按钮时,将触发单击事件,并计算是否超过 1 秒。自按下链接以来已过去。如果是这种情况,点击事件将被取消,链接将不会加载:)

关于javascript - 防止鼠标按下延迟后发生链接事件,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/12450982/

相关文章:

javascript - 这两段代码有什么区别? (javascript)

javascript - 从该日期开始按星期几获取日期

javascript - Electron Jquery click 不适用于表格元素

javascript - 转换 CSS { ul li :hover a } in JQUERY . hover

javascript - 使用 Google Maps API v3 裁剪部分 map

javascript - 图像高度始终返回为 0

jquery $.post 在 Firefox 中不起作用

javascript - Twitter Bootstrap 标签 : Open Specific Tab

javascript - ASP.NET UpdatePanel 阻止 jQuery slider 更新

javascript - IE7 上的 jquery.ui.autocomplete.js 问题