如何阻止来自firefox / chrome开发者控制台检查工具的网页点击事件？

Question

问题＃1：
我正在开发一个chrome扩展程序，它需要一个类似工具的检查器让用户将鼠标悬停在网页上。并显示悬停在DOM元素上的大纲。 当用户点击任何元素时，我需要在元素旁边显示一个弹出窗口。 但与此同时，元素click事件不能执行。它与开发人员控制台检查工具非常相似。你能帮忙怎么做？

问题2：
您能否建议为什么Chrome开发人员控制台的检查工具在这种情况下不起作用？

要重现：
1.转到https://www.google.co.in/url?sa=t&rct=j&q=&esrc=s&source=web&cd=1&cad=rja&uact=8&ved=0ahUKEwjQ377A-8vQAhUHQY8KHUHxCv0QFggaMAA&url=https%3A%2F%2Fconsole.developers.google.com%2F&usg=AFQjCNF0eH059mv86nMIlRmfsf42kde-wA&bvm=bv.139782543,d.c2I
2.单击左上角的“产品和服务”菜单（3条水平线图标）。幻灯片菜单将打开 3.启动开发人员控制台（单击F12） 4.在此菜单上选择任何内容。

实际结果：侧边菜单关闭。

预期结果：侧边菜单不应该关闭，开发者控制台应该显示其html。

Answer 1

1. 我得到了解决方案。我创建了一个div（大小为4x4像素）。我动了 这个div用鼠标移动事件。我设置了div坐标 那个鼠标尖正好在div的中间。
2. Div背景保持透明，因此不可见 用户。因此，当用户点击元素时，他实际上是在点击 div。
3. 在div鼠标按下事件中，我停止事件传播。 如果有人在阅读时需要更多指示，请告诉我。

Answer 2

您可能已经尝试过此操作，但我建议通过添加以下行来为任何可点击的项目添加点击监听器：

$(document).click(function() {
  event.stopPropagation();
  event.preventDefault();
});

虽然由于DOM中的内容会出现问题，但是依赖于浏览器，附加到子的事件仍会触发。