在 JavaScript 中添加覆盖答案

【问题标题】：Adding Overlay in JavaScript在 JavaScript 中添加覆盖
【发布时间】：2012-12-07 13:28:14
【问题描述】：

我正在使用 jsplumb 创建一个流式聊天。一旦流程图创建结束并得到用户的确认，我想让创建的结构不可编辑。为此，已在包含流程图的父级中添加了一个过度，但鼠标单击仍在流程图上发生。

如何 - 添加叠加层后不允许鼠标点击这些组件。

谢谢

【问题讨论】：

这些信息不足以回答您的问题。我建议提供一个有效的jsfiddle
首先，我会让您的叠加层颜色鲜艳，这样您就可以确定它在正确的位置。确保 z-index 足够高，使其显示在前面，然后尝试附加一个单击事件处理程序，该处理程序调用 event.stopPropagation() 的 javascript 等效项。

【解决方案1】：

为覆盖所有点击事件添加一个处理程序：

document.getElementById('yourOverlayID').onclick = function () {
    return false;
};

请记住，任何人都可以通过控制台简单地删除叠加层，并根据需要继续修改图表。您可能想查看 jsplump API 以了解如何执行此操作，例如 unbind()。

【讨论】：

感谢您的信息。我还想禁用鼠标拖动，这样用户就不会拖动连接器并连接到另一个端点
一旦用户确认他已经完成了编辑，我将执行以下代码（document.onmousedown、document.onmouseup、document.onmousedrag 的类似代码），但仍然是覆盖层后面的组件仍在接收鼠标事件。 'document.onmouseup = function () { document.onmouseup = null;返回假； }' 我错过了什么吗？
@NagendarReddy 这不是覆盖，像这样的新插件很可能不会将任何事件绑定到document，也不会以这种方式绑定它们。