質問: stylish,greasemonkyでニコニコ動画のページ改善を行っています。 例えば、この動画() ですと、 動画ページの「メニューを開く」ボタンを押すと、幾つかのボタンが現れますが、この中でツイッター投稿ボタン(.twitterButton)だけ右クリックでポップアップが出現するようになっています。 これを止めたいのですが、どう調べれば良いか分かりません。 要素を検証した所、ポップアップが出ない他のボタンと同じようなjsが書かれていて、なぜポップアップが出るか分かりません。 仕様ブラウザはfirefoxです。 知りたいことは 1.具体的にどの部分がポップアップを出現させているのか、またその調べ方 2.それを消すにはどうすればよいか です。直接的な回答でなくとも、何を調べればよいかを教えていただけるとありがたいです。
回答: 何が起きているか * そのTwitterボタンは `https://twitter.com/intent/tweet?...` へのリンクにすぎないのですが、Twitterのwidget.jsの機能でポップアップとして表示されるようになっています。 * widget.jsは document の click イベントを拾って、これを処理しています。 * 多くのブラウザは右クリックでは click イベントが発生しないのですが、**Firefox に限っては** document 要素にだけ click イベントが発生します。 * MouseEvent には押されたボタンを表す button プロパティがありますが、widget.jsはこれを見ていません というわけで、widget.jsによるリンクのポップアップ化機能を使っているサイトは基本的に、Firefoxでこの問題が起きるはずです。実際これだけのコードで再現できます。 ``` ツイート ``` 他のブラウザの挙動などを考えるとFirefoxが周りに合わせるべきのような気はしますが、2002年に登録されたバグ報告は音沙汰ないですねえ。。。 抑制する方法 幸い、widget.jsはバブリングフェーズでイベントを捕えています。なのでキャプチャフェーズで `e.stopPropagation()` を呼び出し、その先への伝播を止めることができます。 ``` document.addEventListener('click', e => e.button === 2 && e.stopPropagation(), true) ``` 今回の調べ方など ポップアップが表示されるということは `window.open()` を呼び出しているということですから、`window.open = () => {console.trace();debugger}` といった感じに調査コードを仕込むことができます。widget.jsはminifyされていたので、minify解除したものにデバッグプロキシで差し替えたりもしました。 ※console.traceも入れているのは、非同期呼び出しの登録コードまでトレースするためです。 また、ブレークした状態でコールスタックをさかのぼるとイベントハンドラがあり、ローカル変数にEventオブジェクトを見つけました。このオブジェクトのプロパティから * currentTarget (addEventListener先): document * type (Event種別): click * button (押されたボタン): 2 (右ボタン) 等もわかりますね。