contentAreaContextMenu、popupshowing

拡張機能とかuserChrome.jsのスクリプトを書くときに

var contextMenu = document.getElementById("contentAreaContextMenu");
contextMenu.addEventListener("popupshowing", function(event) {
  gContextMenu.showItem("my-hoge-menuitem", gContextMenu.onImage);
}, false);

とかやってメニューの表示状態を制御するのはすごくよくやると思うんだけど、本当ならちゃんとこうしてやらないとだめですね。

var contextMenu = document.getElementById("contentAreaContextMenu");
contextMenu.addEventListener("popupshowing", function(event) {
  if (event.target != this) return;
  gContextMenu.showItem("my-hoge-menuitem", gContextMenu.onImage);
}, false);

もしくはこんなん

var contextMenu = document.getElementById("contentAreaContextMenu");
var obj = {
  handleEvent: function(event) {
    //if (event.target.id != "contentAreaContextMenu") return;
    if (event.target != event.currentTarget) return;
    gContextMenu.showItem("my-hoge-menuitem", gContextMenu.onImage);
  }
};
contextMenu.addEventListener("popupshowing", obj, false);

こうしてやらないとサブメニューが開いた時にもイベントハンドラが実行されてしまう。軽い処理だったら別にいいのかもしれないけど。今まで全然やってなかった。

handleEventを使った例のほうを要素のidに依存しないように書き直しました。

さらに追記
イベントオブジェクトのeventPhaseプロパティを使ってチェックしているコードがあった。

var contextMenu = document.getElementById("contentAreaContextMenu");
contextMenu.addEventListener("popupshowing", function(event) {
  if (event.eventPhase != Event.AT_TARGET) return;
  gContextMenu.showItem("my-hoge-menuitem", gContextMenu.onImage);
}, false);

いろんなやり方があるなあ