在页面加载之前阻止所有MouseClick事件

Question

我有一种情况,我必须阻止所有MouseClick事件,直到页面加载.

我在页面加载上定义了1个javascript函数

onload="init();"

现在在函数init()中,我们显示树并选择它的特定节点.

function init() {
        ExpandAncestors(node);
        ExpandNode(node);
        setTimeout("treeScrollToView()", 1000);
}

现在我想阻止树/页面上的所有鼠标单击事件,直到整个树没有完全显示.

我搜索了一些与我的问题相关的帖子但是使用了event.preventDefault(),但我没有这里的Event对象.

任何帮助是极大的赞赏.

Answer 1

您可以使用:

CSS

body {
  pointer-events:none;
}

然后在页面加载重新激活它们

$(document).ready(() => {
  $('body').css('pointer-events', 'all') //activate all pointer-events on body
})

说明

pointer-events:none; 阻止所有鼠标与其应用的元素进行交互 - 由于body它通常是页面中所有元素的父级,因此它们不会对任何鼠标交互做出反应.

请记住,所有鼠标交互都会被这种方式阻止,不仅是鼠标点击,还有鼠标悬停,鼠标悬停等等.