Question

当页面回发或其他内容正在进行时，我会在整个页面的顶部显示一个大的灰色div，这样用户就无法多次单击同一个按钮。这种方法在99％的时间内工作正常，另外1％在某些移动设备上，用户可以在其中滚动/缩放div。

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

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

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/

Answer 1

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

Answer 2

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

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的默认行为。

Answer 3

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

改性 -

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

例如 -

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

//remove
document.removeListener('click',prevent)

谁能想到阻止用户点击任何东西的更好方法？

3 个答案: