在javascript或Jquery中鼠标单击预防(Mouse click prevention in javascript or Jquery)

在javascript或Jquery中鼠标单击预防(Mouse click prevention in javascript or Jquery)

我有几个按钮，如加载文件，保存文件，部署。 我将一些可视化对象添加到可视化区域。 单击“加载文件”按钮后，我想要阻止鼠标单击事件（在可视化区域中。不用于其他按钮，您可以看到图像）。 当我单击其他按钮时，我想再次激活鼠标单击事件。 仅加载按钮停用可视化区域的鼠标单击事件，其他按钮将再次激活可视化区域的鼠标单击事件。 我怎样才能做到这一点？

在此处输入图像描述

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

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(); })();

提前致谢。

I have several buttons like Load File, Save File, Deploy. I add some visualize object into visualization area. After clicking Load File button, I want to prevent mouse click event(in Visualization Area. Not for the other buttons and you can see the image). When I click the other buttons, I want to activate mouse click event again. Only load button deactivate mouse click event for visualization area and other buttons will activate mouse click event for visualization area again. How can I achieve that?

enter image description here

My Load File button function as below.

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(); })();

Thanks in advance.

最满意答案

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

pointer-events: none;

或者在JQuery中：

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

You can do this by setting a CSS attribute on the button container element (div for example):

pointer-events: none;

Or in JQuery:

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