QA@IT

jQueryで右クリックや中クリック(wheelクリック)する方法

6622 PV

色々と探しまわってもやり方が分からなかったので、質問させてください。

通常のクリック(左クリック)は、jQuery公式サイトのドキュメントで下記のように示されています。

http://api.jquery.com/click/#click
.click()

と。

同様に、下記のように右クリックや中クリックも行いたいと考えています。
.rclick()
.mclick()

これらない場合は、自分でイベントを作らなければならないのでしょうか。
それとも、自分がドキュメント等で見落としているのでしょうか。

どのクリックをされたか判別する方法は沢山見つかるのですが…。

宜しくお願い致します。

回答

イベントハンドラの作成ではなく、イベントをファイアしたいということですね。
通常 click()によるイベント発火は左クリックしかでき無いと思います。

なので自分で作る・・・といえばそうなるのですが、
jQuery上のイベント自体はどのボタンを押してもclickイベントで、そのイベント引数で処理を振り分けています。
ですから今回の場合はイベントを作るというよりは、引数付きでイベントを呼び出すイメージです。

たとえば targetというIDを持つ要素の真ん中ボタンを押したことにするには以下の様にします。

$("#target").trigger({
   type: 'click',
   which: 2
});

which: 2 が真ん中ボタンを表し、右ボタンなら 3を指定します。

triggerはイベントを発火させるためのものです。
普通のjavascriptだとFireEventとかにあたりますね。


以下ついでにプラグイン化

左クリックなら click() なのにそれ以外だとtriggerでわかりにくい、rclickとか欲しい!という場合はプラグインにしてしまうという手もあります。
こちらは質問の主題と関係ないのでよくわからなければ読み飛ばしてもらって結構です。

以下のjQueryにrclickを追加するjavascriptをrclickを使うより前に記述します。
jQueryを読み込んでるscript文のすぐ下あたりに書いておけばいいかと。

(function(jQuery) {
   jQuery.fn.rclick = function() {
       this.trigger(
           { type: 'click', which: 3}
       );
       return this;
   };
})(jQuery);

こうするとどのタグであっても右クリックしたことにするコードは以下の様に書けます。
(以下は idがtargetのものを指定していますが他のidやタグにも指定できます)

$("#target").rclick();

ただしこのrclickを使った場合もイベントハンドラはclickに書く必要がありますのでそこは注意してください。

$("#target").click(function(event){
    alert(event.which);
});

真ん中ボタンは自分でやってみてください。

編集 履歴 (2)
  • 折角、早々の回答して頂いたにもかかわらず返信遅れてしまい、
    申し訳ありませんでした。

    そして、明快な回答有難う御座いました!
    どのクリックも全てクリックなので、どこをクリックされたかをwhichで判別してtriggerで処理するってのがポイントだったのですね。

    無事、私の疑問が解消されました。
    わざわざ追加でjQueryプラグインまで書いて頂き感謝です。
    -
ウォッチ

この質問への回答やコメントをメールでお知らせします。