0

我正在开发一个功能，以便当用户单击并按住链接时，该链接不会将用户发送到适当的链接。但是，我使用的功能不起作用。我想要的是用户单击一个链接，如果他们按住它超过一秒钟，则该链接不再有效并且不会触发任何事件。看了一段时间后，我找不到代码有什么问题。所以我的问题是，我做错了什么？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>
4

3 回答 3

6

这应该工作：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 秒，则计算它。自按下链接后已过去。如果是这种情况，点击事件被取消并且链接不会加载:)

于 2012-09-16T22:02:34.130 回答
1

这是你的答案：http: //jsfiddle.net/rQP6g/19/测试和工作

还有你的jQuery代码：

var startingTime, timeOut = 1000;
(function($) {
    $('a').bind('click', function(e) {
        e.preventDefault();
    }).bind('mousedown', function(e) {
        window.startingTime = +new Date();
    }).bind('mouseup', function (e) {
        console.log('Starting time: '+ window.startingTime);
        var currentTime = +new Date();
        console.log('Current time: '+ (+new Date()));
        var difference = currentTime - window.startingTime;
        console.log (difference);
        if (difference > timeOut) {
            console.log('You are too slow, nothing happens');
        } else {
            console.log($(this).attr('href'));
            window.location.href = $(this).attr('href');
        }
    });
})(jQuery);
于 2012-09-16T22:03:53.233 回答
1

我会采用相反的方法 - 阻止一切，然后允许在阈值之前释放点击：

// set threshold in millisecs:
var threshold = 1000;

$('a').on('click',function(event){

    event.preventDefault();

    // inject current time in link element:
    $(this).attr('data-timestamp', new Date.getTime());

}, function(event){

    // check mousedown timestamp against mouseup timestamp:
    if( (new Date.getTime() - $(this).attr('data-timestamp') < threshold){

        window.location.href = $(this).attr('href');    

    }

});​​​​
于 2012-09-16T22:04:06.390 回答