javascript或jQuery中的鼠标单击预防

Question

我有几个按钮，例如“加载文件”，“保存文件”，“部署”。 我将一些可视化对象添加到可视化区域。 单击“加载文件”按钮后，我想防止鼠标单击事件（在“可视化区域”中。不适用于其他按钮，您可以看到该图像）。 当我单击其他按钮时，我想再次激活鼠标单击事件。 仅加载按钮会禁用可视化区域的鼠标单击事件，而其他按钮将再次激活可视化区域的鼠标单击事件。 我该如何实现？

在此处输入图片说明

我的加载文件按钮的功能如下。

button()
.container(g3)
.text(text3)
.count(2)
.cb(function() {
        console.log("Load File");
        console.log("nodes", nodes);
        console.log("Reading JSON File");
        loadFlag = true;
        clearFlag = false;
        update();
})();

提前致谢。

Answer 1

您可以通过在按钮容器元素（例如div ）上设置CSS属性来实现此目的：

pointer-events: none;

或在JQuery中：

$("#button_container_div_id").css("pointer-events", "none");

Answer 2

您可以禁用除#load按钮之外的#load按钮。 单击#load按钮可切换disable属性。

JSFIDDLE

这是代码

 $('#load').click(function() { $('button').not(this).prop('disabled', function(_, val) { return !val; }); }); // TO check whether the other buttons are disabled or not $('button').not("#load").click(function() { alert("CLICKED"); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <button id="load"> Load </button> <button id="file"> FILE </button> <button id="file1"> FILE 1 </button> <button id="file2"> FILE 2 </button> <button id="file3"> FILE 3 </button>