javascript - 文档和图像点击优先级

Question

我有一个文件。我无法改变它。
它有一个图像。
图像具有 onclick 事件 (imageCallback)。

我还有一个书签。我想做document.onclick = documentCallback;
并且我想documentCallback优先考虑：它应该首先运行。并且imageCallback在我关闭书签之前根本不应该运行。

我该怎么做？

Answer 1

删除你的 imageCallback 函数，并在你的 document.onclick 中查找事件源：

html:

<img id="id-of-your-img" src="...">

javascript:

document.onclick = function (event) {

  // do what needs to be done first

  //do whatever you want to do when the img was clicked
  if(event.srcElement.id === 'id-of-your-img') {

  }
};

编辑（我想我现在知道你想要实现什么（提示“书签”很重要）：

var yourimg = document.getElementById('your-img-id')
  , imgCallback = yourimg.onclick;
yourimg.onclick = function () {};

document.onclick = function (event) {

  // do what needs to be done first

  if(event.srcElement === yourimg) {
    imgCallback();
  }
};

这里做了什么？我们获取图像，覆盖当前的点击处理程序（但将其保存到我们的 imgCallback-Var 中。当点击文档时，我们做任何我们想做的事情，然后看看事件源是否是我们的图像。如果是，我们执行我们的imgCallback-Function。

Answer 2

通过 addEventListener 添加事件处理程序并将 useCapture 参数设置为 true：

document.addEventListener('click', documentCallback, true)

事件可以分两个阶段进行调度，冒泡阶段和捕获阶段，捕获阶段是第一位的，你应该看看这个