javascript 或 Jquery 中的鼠标点击预防

Question

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

enter image description here

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

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

您可以通过在按钮容器元素上设置 CSS 属性（例如 div）来做到这一点：

pointer-events: none;

或在JQuery：

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

Answer 2

您可以禁用除 #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>

javascript 或 Jquery 中的鼠标点击预防

Mouse click prevention in javascript or Jquery

javascript

mouseevent