禁用页面上的所有点击事件(javascript)

Question

什么是通过javascript暂时禁用所有鼠标点击/拖动等事件的最简单方法？

我以为我可以document.onclick = function() { return false; };......等等,但那不行.

Answer 1

如果目标是禁用点击整个页面,那么你可以做这样的事情

document.addEventListener("click",handler,true);

function handler(e){
    e.stopPropagation();
    e.preventDefault();
}

addEventListener中的true参数将确保在事件捕获阶段执行处理程序,即首先在文档上捕获任何元素的单击,并且在侦听器之前首先执行文档的click事件的侦听器以获取任何其他元素.这里的技巧是阻止事件进一步传播到下面的元素,从而结束调度过程,以确保事件不会到达目标.

此外,您需要显式停止与事件目标元素关联的默认行为,因为在调度过程完成后默认情况下它们将被执行,即使事件已停止从上方进一步传播

可以进一步修改以选择性地使用.

function handler(e){
if(e.target.className=="class_name"){
e.stopPropagation();
e.preventDefault();
}

以这种方式修改的处理程序将仅禁用具有类"class_name"的元素的单击.

function handler(e){
    if(e.target.className!=="class_name")
    e.stopPropagation()
}

这将仅启用具有类"class_name"的元素的单击.希望这有助于:)

Answer 2

动态禁用页面上的所有点击

let freezeClic = false; // just modify that variable to disable all clics events

document.addEventListener("click", e => {
    if (freezeClic) {
        e.stopPropagation();
        e.preventDefault();
    }
}, true);

我经常在加载时使用它，或者避免用户不小心点击操作按钮两次。简单且性能友好:)

请检查这个工作示例

替代 CSS 方式

另一个我非常喜欢的，因为用户得到的视觉反馈：

/* style.css */
.loading {
    cursor: wait; /* busy cursor feedback */
}

.loading * {
    /* disable all mouse events on subElements */
    pointer-events: none; 
}

然后你只需要做：

$('#my-item').addClass('loading');
await myAsyncFunction() // wait until the function complete
$('#my-item').removeClass('loading');

Answer 3

如果你想要绝对没有任何可拖动/可点击,禁用键入输入字段等,我会考虑在整个页面上显示一个绝对定位的透明div,以便每次点击都将在div上,这将不执行任何操作.这将授予您快速和整洁地打开和关闭此单击禁用程序,而无需注册大量的侦听器

Answer 4

如果 onclick = null 已执行如何撤销 onclick 事件以正常运行..或

<a href="www.somesite.com" onclick="return yourFunction(this)">Link text</a>

<script type="text/javascript">
function yourFunction(anchor)
{ if(anchor.disabled) return;
/* Your function here */
}
</script>