仅限JavaScript

Question

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

我在页面加载中定义了1个javascript函数，如

onload="init();"

现在在函数init（）中，我们显示树并选择它的特定节点。

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

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

我搜索了一些与我的问题相关的帖子但是使用了 event.preventDefault（），但我这里没有事件对象。

非常感谢任何帮助。

Answer 1

您可以使用：

<强> CSS

body {
  pointer-events:none;
}

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

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

<强>解释

pointer-events:none; 阻止所有鼠标与其应用的元素的互动 - 由于body通常是您网页中所有元素的父级，因此会让他们不要对任何鼠标互动做出反应。

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

Answer 2

我认为基本需要是防止用户点击树区域。我更喜欢显示叠加div而不是使用树鼠标单击事件。

您可以在树部件上显示加载叠加层，直到加载完毕。完成后，您可以隐藏加载并显示原始树。

参考：How to completely DISABLE any MOUSE CLICK

Answer 3

仅限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; }

}());

Answer 4

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

将事件作为参数传递。

onload="init(event);"

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

Answer 5

尝试使用$.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>

阻止所有MouseClick事件，直到页面加载

5 个答案:

仅限JavaScript

将其与一个元素