-1

当前，当页面回发或发生其他事情时，我会在整个页面的顶部显示一个大的灰色 div，这样用户就不能多次单击同一个按钮。这在 99% 的情况下都可以正常工作，另外 1% 是在某些移动设备上，用户可以在其中滚动/缩放远离 div。

我没有尝试完善 CSS 以使其正常工作（这将是与新设备的一场持续战斗），我决定阻止用户单击任何内容。类似的东西$('a').click(function(e){e.preventDefault();});会阻止人们点击锚标签并导航到链接，但它不会阻止链接中的 onclick 事件触发。

我想尽量避免过于彻底地更改页面（例如删除每个 onclick 属性），因为最终必须将页面更改回其原始状态。我想做的是在执行 onclick 事件之前拦截点击，但我认为这是不可能的。相反，我所做的是在鼠标按下时隐藏单击的元素并在文档的 mouseup 上显示它，这会停止单击事件触发，但看起来不太好。谁能想到更好的解决方案？如果不是，那么这将适用于每个设备/浏览器吗？

var catchClickHandler = function(){
    var $this = $(this);
    $this.attr('data-orig-display', $this.css('display'));
    $this.css({display:'none'});
};
var resetClickedElems = function(){
    $('[data-orig-display]').each(function(){
        $(this).css({display:$(this).attr('data-orig-display')}).removeAttr('data-orig-display');
    });
};

$('#btn').click(function(){
    $('a,input').on('mousedown',catchClickHandler);
    $(document).on('mouseup', resetClickedElems);
    setTimeout(function(){
        $('a,input').off('mousedown',catchClickHandler);
        $(document).off('mouseup', resetClickedElems);
    }, 5000);
});

JSFiddle：http: //jsfiddle.net/d4wzK/2/

4

3 回答 3

1

您可以使用 jQuery BlockUI 插件 http://www.malsup.com/jquery/block/

于 2013-05-15T14:27:17.107 回答
1

您可以执行以下操作来阻止锚标记的所有操作：

jQuery('#btn').click(function(){
    jQuery('a').each(function() {
        jQuery(this).attr('stopClick', jQuery(this).attr('onclick'))
            .removeAttr('onclick')
            .click(function(e) {
                e.preventDefault();
            });
    });
});

如果您需要稍后恢复，这会将 onclick 重命名为 stopclick，并且还会停止遵循 href 的默认行为。

于 2013-05-15T14:31:58.377 回答
0 
document.addListener('click',function(e){e.preventDefault()})

修改的-

完成任务后，您有责任从文档中删除点击事件。

例如 -

function prevent(e){
    e.preventDefault()
}
//add 
document.addListener('click',prevent)

//remove
document.removeListener('click',prevent)
于 2013-05-15T14:32:14.903 回答