回答編集履歴
9
typoを修正
answer
CHANGED
|
@@ -51,7 +51,7 @@
|
|
|
51
51
|
|
|
52
52
|
---
|
|
53
53
|
|
|
54
|
-
また、仕様では`event.which`プロパティは削除されており、代わりに`event.button`プロパティと`event.
|
|
54
|
+
また、仕様では`event.which`プロパティは削除されており、代わりに`event.button`プロパティと`event.buttons`プロパティの使用が推奨されています。
|
|
55
55
|
|
|
56
56
|
[MouseEvent.which - Web APIs | MDN](https://developer.mozilla.org/en-US/docs/Web/API/MouseEvent/which)
|
|
57
57
|
|
8
IE8はサポートも終了したため、それに合わせた内容に修正
answer
CHANGED
|
@@ -35,26 +35,36 @@
|
|
|
35
35
|
|
|
36
36
|
---
|
|
37
37
|
|
|
38
|
-
なお、当初はこれを`click`イベントで検出する予定でしたが、
|
|
39
|
-
IE8以下では`mousedown`, `mouseup`, `mousemove`イベント以外の場合はどのようなクリックであっても`event.button`の値が0にな
|
|
38
|
+
ちなみに、IE8以下のInternet Explorerでは、`mousedown`, `mouseup`, `mousemove`イベント以外の場合は、どのようなクリックであっても`event.button`の値が0になってしまいます。
|
|
40
39
|
|
|
41
|
-
[jQuery で 右クリックと左クリックを判別](
|
|
40
|
+
[jQuery で 右クリックと左クリックを判別 - galife](https://garafu.blogspot.com/2013/01/jquery.html)
|
|
42
41
|
|
|
43
42
|
> ちなみに、clickイベント時、IE8 だと button プロパティが 0 にしかならないので使えない…
|
|
44
43
|
|
|
45
|
-
[button property (Internet Explorer)](https://msdn.microsoft.com/library/ms533544%28en-us,VS.85%29.aspx)
|
|
44
|
+
~~[button property (Internet Explorer)](https://msdn.microsoft.com/library/ms533544%28en-us,VS.85%29.aspx)~~
|
|
46
45
|
|
|
47
46
|
> This property is used with the onmousedown, onmouseup, and onmousemove events. For other events, it defaults to 0 regardless of the state of the mouse buttons.
|
|
48
47
|
|
|
49
48
|
このため、`click`イベントではクリックの種類を判定できず、利用できません。
|
|
50
|
-
`mouseup`イベントで判定を行う予定です。
|
|
51
49
|
|
|
52
|
-
|
|
50
|
+
既にセキュリティサポートすら切れた古の遺産たるIE8以下を考慮する状況は限られると思います。しかし、もしIE8以下でも動く処理が必要な場合は、クリックを`mousedown`イベントや`mouseup`イベントで検知するようにしましょう。
|
|
53
51
|
|
|
54
|
-
|
|
52
|
+
---
|
|
55
53
|
|
|
54
|
+
また、仕様では`event.which`プロパティは削除されており、代わりに`event.button`プロパティと`event. buttons `プロパティの使用が推奨されています。
|
|
55
|
+
|
|
56
|
+
[MouseEvent.which - Web APIs | MDN](https://developer.mozilla.org/en-US/docs/Web/API/MouseEvent/which)
|
|
57
|
+
|
|
56
58
|
> Non-standard
|
|
57
59
|
> This feature is non-standard and is not on a standards track. Do not use it on production sites facing the Web: it will not work for every user. There may also be large incompatibilities between implementations and the behavior may change in the future.
|
|
58
60
|
|
|
59
|
-
`
|
|
61
|
+
> The standard alternatives to this property are [`MouseEvent.button`](https://developer.mozilla.org/en-US/docs/Web/API/MouseEvent/button) and [`MouseEvent.buttons`](https://developer.mozilla.org/en-US/docs/Web/API/MouseEvent/buttons).
|
|
62
|
+
|
|
63
|
+
`event.which`は今後ブラウザからも消えていくプロパティです。
|
|
64
|
+
しかし、jQueryでは逆に`event.button`より`event.which`の使用を推奨する記述があり、このままでは今後のWeb標準に対応できません。
|
|
65
|
+
|
|
66
|
+
[event.which | jQuery API Documentation](https://api.jquery.com/event.which/)
|
|
67
|
+
|
|
68
|
+
> Use `event.which` instead of `event.button`.
|
|
69
|
+
|
|
60
70
|
この事を視野に入れた、更なる修正が必要かもしれません。
|
7
該当の処理のソースコードを発見したため、追記
answer
CHANGED
|
@@ -1,7 +1,10 @@
|
|
|
1
1
|
MediaWikiの[Media Viewer](https://ja.wikipedia.org/wiki/Wikipedia:Media_Viewer)がまさにこの質問で求める動作をしていたため[デバッグ](http://shim0mura.hatenadiary.jp/entry/20111231/1325357395)を行ってみたところ、以下の処理により判定を行っていました。
|
|
2
2
|
|
|
3
3
|
```JavaScript
|
|
4
|
+
/*
|
|
4
|
-
|
|
5
|
+
* jQueryが内部的に行う`event.which`プロパティの定義
|
|
6
|
+
* https://github.com/jquery/jquery/blob/3.3.1/src/event.js#L636-L662
|
|
7
|
+
*/
|
|
5
8
|
var button = event.button;
|
|
6
9
|
// Add which for click: 1 === left; 2 === middle; 3 === right
|
|
7
10
|
// Note: button is not normalized, so don't use it
|
|
@@ -9,7 +12,10 @@
|
|
|
9
12
|
event.which = (button & 1 ? 1 : (button & 2 ? 3 : (button & 4 ? 2 : 0)));
|
|
10
13
|
}
|
|
11
14
|
|
|
12
|
-
/*
|
|
15
|
+
/*
|
|
16
|
+
* 判定箇所
|
|
17
|
+
* https://github.com/wikimedia/mediawiki-extensions-MultimediaViewer/blob/6b83fca574e3dcc2fa4526117f88940dcfc06f30/resources/mmv/mmv.bootstrap.js#L431-L434
|
|
18
|
+
*/
|
|
13
19
|
if ((event.button !== 0 && event.which !== 1) || event.altKey || event.ctrlKey || event.shiftKey || event.metaKey) {
|
|
14
20
|
// 別タブ/ウィンドウで開くクリック
|
|
15
21
|
} else {
|
|
@@ -17,6 +23,9 @@
|
|
|
17
23
|
}
|
|
18
24
|
```
|
|
19
25
|
|
|
26
|
+
* [jquery/event.js at 3.3.1 · jquery/jquery](https://github.com/jquery/jquery/blob/3.3.1/src/event.js#L636-L662)
|
|
27
|
+
* [mediawiki-extensions-MultimediaViewer/mmv.bootstrap.js at 6b83fca574e3dcc2fa4526117f88940dcfc06f30 · wikimedia/mediawiki-extensions-MultimediaViewer](https://github.com/wikimedia/mediawiki-extensions-MultimediaViewer/blob/6b83fca574e3dcc2fa4526117f88940dcfc06f30/resources/mmv/mmv.bootstrap.js#L431-L434)
|
|
28
|
+
|
|
20
29
|
変数`event`は、対象のイベントのイベントオブジェクトです。
|
|
21
30
|
判定としては、[event.button](https://developer.mozilla.org/ja/docs/Web/API/Event/button)または[event.which](http://js.studio-kingdom.com/jquery/events/event_which)で「左クリック以外」かの判定と、CtrlやShift等の特殊キーが押下されているかをORで判定していました。
|
|
22
31
|
|
6
クリックによるページ移動はキーから指を離した時に発生するため、mousedownではなくmouseupに修正。
answer
CHANGED
|
@@ -38,7 +38,7 @@
|
|
|
38
38
|
> This property is used with the onmousedown, onmouseup, and onmousemove events. For other events, it defaults to 0 regardless of the state of the mouse buttons.
|
|
39
39
|
|
|
40
40
|
このため、`click`イベントではクリックの種類を判定できず、利用できません。
|
|
41
|
-
`
|
|
41
|
+
`mouseup`イベントで判定を行う予定です。
|
|
42
42
|
|
|
43
43
|
また、仕様では`event.which`は削除され、`event.button`が推奨されています。
|
|
44
44
|
|
5
「W3Cの」仕様であるのか不明確だったため、「W3C」という単語を削除
answer
CHANGED
|
@@ -1,4 +1,5 @@
|
|
|
1
1
|
MediaWikiの[Media Viewer](https://ja.wikipedia.org/wiki/Wikipedia:Media_Viewer)がまさにこの質問で求める動作をしていたため[デバッグ](http://shim0mura.hatenadiary.jp/entry/20111231/1325357395)を行ってみたところ、以下の処理により判定を行っていました。
|
|
2
|
+
|
|
2
3
|
```JavaScript
|
|
3
4
|
/* jQueryが内部的に行う`event.which`の定義 */
|
|
4
5
|
var button = event.button;
|
|
@@ -15,29 +16,34 @@
|
|
|
15
16
|
// 普通のクリック
|
|
16
17
|
}
|
|
17
18
|
```
|
|
19
|
+
|
|
18
20
|
変数`event`は、対象のイベントのイベントオブジェクトです。
|
|
19
21
|
判定としては、[event.button](https://developer.mozilla.org/ja/docs/Web/API/Event/button)または[event.which](http://js.studio-kingdom.com/jquery/events/event_which)で「左クリック以外」かの判定と、CtrlやShift等の特殊キーが押下されているかをORで判定していました。
|
|
20
22
|
|
|
21
23
|
MediaWikiは、世界で5番目に人気のあるウェブサイトWikipediaで使用されているシステムです。
|
|
22
24
|
当然、より多くのユーザに対応するため、様々な環境で検証を行い、動作を確認しているコードのはずです。
|
|
23
25
|
よって、信頼性は十分であり、「普通のクリック」と「別タブ/ウィンドウで開くクリック」を区別する方法として、これが適切であると考えます。
|
|
26
|
+
|
|
24
27
|
---
|
|
25
28
|
|
|
26
29
|
なお、当初はこれを`click`イベントで検出する予定でしたが、
|
|
27
30
|
IE8以下では`mousedown`, `mouseup`, `mousemove`イベント以外の場合はどのようなクリックであっても`event.button`の値が0になるという仕様が存在します。
|
|
28
31
|
|
|
29
32
|
[jQuery で 右クリックと左クリックを判別](http://garafu.blogspot.jp/2013/01/jquery.html)
|
|
33
|
+
|
|
30
34
|
> ちなみに、clickイベント時、IE8 だと button プロパティが 0 にしかならないので使えない…
|
|
31
35
|
|
|
32
36
|
[button property (Internet Explorer)](https://msdn.microsoft.com/library/ms533544%28en-us,VS.85%29.aspx)
|
|
37
|
+
|
|
33
38
|
> This property is used with the onmousedown, onmouseup, and onmousemove events. For other events, it defaults to 0 regardless of the state of the mouse buttons.
|
|
34
39
|
|
|
35
40
|
このため、`click`イベントではクリックの種類を判定できず、利用できません。
|
|
36
41
|
`mousedown`イベントで判定を行う予定です。
|
|
37
42
|
|
|
38
|
-
また、
|
|
43
|
+
また、仕様では`event.which`は削除され、`event.button`が推奨されています。
|
|
39
44
|
|
|
40
45
|
[MouseEvent.which - Web API Interfaces | MDN](https://developer.mozilla.org/en-US/docs/Web/API/MouseEvent/which)
|
|
46
|
+
|
|
41
47
|
> Non-standard
|
|
42
48
|
> This feature is non-standard and is not on a standards track. Do not use it on production sites facing the Web: it will not work for every user. There may also be large incompatibilities between implementations and the behavior may change in the future.
|
|
43
49
|
|
4
イベント名に"on"がついていたため、これを削除
answer
CHANGED
|
@@ -24,7 +24,7 @@
|
|
|
24
24
|
---
|
|
25
25
|
|
|
26
26
|
なお、当初はこれを`click`イベントで検出する予定でしたが、
|
|
27
|
-
IE8以下では`
|
|
27
|
+
IE8以下では`mousedown`, `mouseup`, `mousemove`イベント以外の場合はどのようなクリックであっても`event.button`の値が0になるという仕様が存在します。
|
|
28
28
|
|
|
29
29
|
[jQuery で 右クリックと左クリックを判別](http://garafu.blogspot.jp/2013/01/jquery.html)
|
|
30
30
|
> ちなみに、clickイベント時、IE8 だと button プロパティが 0 にしかならないので使えない…
|
3
引用を追加
answer
CHANGED
|
@@ -23,9 +23,23 @@
|
|
|
23
23
|
よって、信頼性は十分であり、「普通のクリック」と「別タブ/ウィンドウで開くクリック」を区別する方法として、これが適切であると考えます。
|
|
24
24
|
---
|
|
25
25
|
|
|
26
|
+
なお、当初はこれを`click`イベントで検出する予定でしたが、
|
|
26
|
-
|
|
27
|
+
IE8以下では`onmousedown`, `onmouseup`, `onmousemove`イベント以外の場合はどのようなクリックであっても`event.button`の値が0になるという仕様が存在します。
|
|
28
|
+
|
|
27
29
|
[jQuery で 右クリックと左クリックを判別](http://garafu.blogspot.jp/2013/01/jquery.html)
|
|
30
|
+
> ちなみに、clickイベント時、IE8 だと button プロパティが 0 にしかならないので使えない…
|
|
28
31
|
|
|
32
|
+
[button property (Internet Explorer)](https://msdn.microsoft.com/library/ms533544%28en-us,VS.85%29.aspx)
|
|
33
|
+
> This property is used with the onmousedown, onmouseup, and onmousemove events. For other events, it defaults to 0 regardless of the state of the mouse buttons.
|
|
34
|
+
|
|
35
|
+
このため、`click`イベントではクリックの種類を判定できず、利用できません。
|
|
36
|
+
`mousedown`イベントで判定を行う予定です。
|
|
37
|
+
|
|
29
38
|
また、W3Cの仕様では`event.which`は削除され、`event.button`が推奨されています。
|
|
39
|
+
|
|
40
|
+
[MouseEvent.which - Web API Interfaces | MDN](https://developer.mozilla.org/en-US/docs/Web/API/MouseEvent/which)
|
|
41
|
+
> Non-standard
|
|
42
|
+
> This feature is non-standard and is not on a standards track. Do not use it on production sites facing the Web: it will not work for every user. There may also be large incompatibilities between implementations and the behavior may change in the future.
|
|
43
|
+
|
|
30
44
|
`event.which`は今後非対応となるプロパティですが、jQueryでは逆に`event.button`より`event.which`の使用を推奨する記述があり、このままでは今後のWeb標準に対応できません。
|
|
31
45
|
この事を視野に入れた、更なる修正が必要かもしれません。
|
2
MediaWikiのコードが信頼に足る理由と、event.whichによる左クリック判定の今後について記述を追加。
answer
CHANGED
|
@@ -17,7 +17,15 @@
|
|
|
17
17
|
```
|
|
18
18
|
変数`event`は、対象のイベントのイベントオブジェクトです。
|
|
19
19
|
判定としては、[event.button](https://developer.mozilla.org/ja/docs/Web/API/Event/button)または[event.which](http://js.studio-kingdom.com/jquery/events/event_which)で「左クリック以外」かの判定と、CtrlやShift等の特殊キーが押下されているかをORで判定していました。
|
|
20
|
-
「普通のクリック」と「別タブ/ウィンドウで開くクリック」を区別する方法として、これが適切であると考えます。
|
|
21
20
|
|
|
21
|
+
MediaWikiは、世界で5番目に人気のあるウェブサイトWikipediaで使用されているシステムです。
|
|
22
|
+
当然、より多くのユーザに対応するため、様々な環境で検証を行い、動作を確認しているコードのはずです。
|
|
23
|
+
よって、信頼性は十分であり、「普通のクリック」と「別タブ/ウィンドウで開くクリック」を区別する方法として、これが適切であると考えます。
|
|
24
|
+
---
|
|
25
|
+
|
|
22
26
|
なお、当初はこれを`click`イベントで検出する予定でしたが、IE8以下では`click`イベントの場合に`event.button`でクリックの種類を判定できない問題があるため、`mousedown`イベントで判定を行う予定です。
|
|
23
|
-
[jQuery で 右クリックと左クリックを判別](http://garafu.blogspot.jp/2013/01/jquery.html)
|
|
27
|
+
[jQuery で 右クリックと左クリックを判別](http://garafu.blogspot.jp/2013/01/jquery.html)
|
|
28
|
+
|
|
29
|
+
また、W3Cの仕様では`event.which`は削除され、`event.button`が推奨されています。
|
|
30
|
+
`event.which`は今後非対応となるプロパティですが、jQueryでは逆に`event.button`より`event.which`の使用を推奨する記述があり、このままでは今後のWeb標準に対応できません。
|
|
31
|
+
この事を視野に入れた、更なる修正が必要かもしれません。
|
1
「デバッグ」にリンクを追加
answer
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
MediaWikiの[Media Viewer](https://ja.wikipedia.org/wiki/Wikipedia:Media_Viewer)がまさにこの質問で求める動作をしていたためデバッグを行ってみたところ、以下の処理により判定を行っていました。
|
|
1
|
+
MediaWikiの[Media Viewer](https://ja.wikipedia.org/wiki/Wikipedia:Media_Viewer)がまさにこの質問で求める動作をしていたため[デバッグ](http://shim0mura.hatenadiary.jp/entry/20111231/1325357395)を行ってみたところ、以下の処理により判定を行っていました。
|
|
2
2
|
```JavaScript
|
|
3
3
|
/* jQueryが内部的に行う`event.which`の定義 */
|
|
4
4
|
var button = event.button;
|