javascript - ドキュメントと画像のオンクリック優先度

Question

私は文書を持っています。変更できません。
イメージがあります。
画像には onclick イベント (imageCallback) があります。

ブックマークレットもあります。私はやりたいし、優先したい：最初に実行する必要がありますdocument.onclick = documentCallback;
。documentCallbackブックマークレットを閉じるまで、imageCallbackまったく実行しないでください。

どうすればいいですか？

Answer 1

imageCallback-functionを削除し、document.onclickでevent-Sourceを検索します。

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)

イベントは、バブリング フェーズとキャプチャ フェーズの 2 つのフェーズでディスパッチできます。キャプチャ フェーズが最初に来ます。