阻止鼠标点击事件直到页面加载完成

Question

阻止鼠标点击事件直到页面加载完成

3

我有一个情况，需要在页面加载之前阻止所有的鼠标点击事件。

我有一个JavaScript函数，在页面加载时定义如下：

onload="init();"

现在在init()函数中，我们正在显示树并选择其中的特定节点。

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

现在我想要在整个树形结构完全显示之前阻止所有的鼠标点击事件。

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

非常感激任何帮助。

- Sanket Pipariya

这个链接可能也会有帮助：**THIS LINK**。 - Guruprasad J Rao

5个回答

4

我认为基本需求是防止用户点击树区域。我更希望显示一个覆盖层div而不是操作树鼠标点击事件。

你可以在树部分显示一个加载覆盖层，直到它被加载完成。完成后，你可以隐藏加载并显示原始的树。

参考资料：如何完全禁用任何鼠标单击

- Vijay

不过这并不会产生明显的影响，但这是最高效的方式 - 加入一些代码实现此功能。 - nicholaswmin

我已经添加了参考链接。可重用性是最佳策略 :) - Vijay

这是最好的方法...在页面加载时显示透明覆盖层...解决点击问题的最有效和可靠的方式。 - Gags

2

仅使用JavaScript

你可以使用事件监听器和布尔值。 onclick 禁用鼠标左键点击。 oncontextmenu 禁用鼠标右键点击。

(function(){window.onload = function () {

    var allowClicks = false;

    document.onclick = function (e) {  !allowClicks&&e.preventDefault();  }
    document.oncontextmenu = function (e) {  !allowClicks&&e.preventDefault();  }
    document.getElementById('myElement').onload = function () { allowClicks = true; }

}());

myElement是您可以用任何内容替换的元素。

仅针对一个元素使用此方法

如果您想要仅禁用一个元素的鼠标点击，请执行以下操作：

(function(){window.onload = function () {

    var allowClicks = false,
        elem = document.getElementById('myElement');

    elem.onclick = function (e) {  !allowClicks&&e.preventDefault();  }
    elem.oncontextmenu = function (e) {  !allowClicks&&e.preventDefault();  }
    elem.onload = function () { allowClicks = true; }

}());

- Downgoat

最好使用.addEventListener而不是.onclick。 - Paul S.

@PaulS。我认为.onload的支持稍微好一些。 - Downgoat

@Vijay 我也讨厌全局变量！不过我不确定 OP 会如何使用它，所以我再提供另一种方式。我把所有的全局变量都分组到一个单独的全局对象 globals 中。 - Downgoat

难道你不认为应该是 if (!window.globals || !window.globals.allowclicks) 吗？ - Vijay

@Vijay 是的，我刚注意到并已修复。我还把代码放在了一个自执行函数中以避免全局变量 :) - Downgoat

0

onload="init();" 这里你可以拥有 event 对象。

将事件作为参数传递。

onload="init(event);"

现在你可以在 init() 函数中使用它了。

- sachin.ph

这将会给你一个事件，但是你正在e.preventDefault()在window.onload上运行。 - Downgoat

0

尝试利用$.holdReady()

$.holdReady(true);

$(window).off("click");

$("*").each(function(i, el) {
  this.onclick = function(e) {
    e.preventDefault();
  }
});

 function init() {
  $("div").on("click", function() {
    alert($.now())
  })
}

setTimeout(function() {
  $.holdReady(false);
}, 7000)

$(function() {
    init()
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js">
</script>
<body>
<div>click</div>
  <a href="javascript:alert(new Date())">click</a>
</body>

- guest271314

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- nicholaswmin · Accepted Answer

你可以使用：

CSS

body {
  pointer-events:none;
}

并在页面加载时重新激活它们。

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

说明

pointer-events:none;会阻止应用它的元素与鼠标的所有交互-由于页面中所有元素的父级通常是，这将导致它们不对任何鼠标交互做出反应。

请注意，所有的鼠标交互都将被阻止，不仅限于鼠标点击，还包括鼠标悬停、鼠标抬起等等。