回答編集履歴
3
Dragpos\.prototype\.handleEvent のコード修正
answer
CHANGED
|
@@ -23,11 +23,11 @@
|
|
|
23
23
|
Dragpos.prototype.handleEvent = function handleEvent (event) {
|
|
24
24
|
switch (event.type) {
|
|
25
25
|
case 'mousedown':
|
|
26
|
-
return this.mouseDown(event);
|
|
26
|
+
return this.mouseDown.call(this, event);
|
|
27
27
|
case 'mouseup':
|
|
28
|
-
return this.mouseUp(event);
|
|
28
|
+
return this.mouseUp.call(this, event);
|
|
29
29
|
case 'mousemove':
|
|
30
|
-
return this.mouseMove(event);
|
|
30
|
+
return this.mouseMove.call(this, event);
|
|
31
31
|
}
|
|
32
32
|
|
|
33
33
|
throw new Error('unknown event type');
|
2
typo修正
answer
CHANGED
|
@@ -34,11 +34,11 @@
|
|
|
34
34
|
};
|
|
35
35
|
```
|
|
36
36
|
|
|
37
|
-
### Function
|
|
37
|
+
### Function.prototype.bind
|
|
38
38
|
|
|
39
39
|
- [Function.prototype.bind() - JavaScript | MDN](https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Function/bind)
|
|
40
40
|
|
|
41
|
-
`event.currentTarget` に束縛された `this` 値を `Function
|
|
41
|
+
`event.currentTarget` に束縛された `this` 値を `Function.prototype.bind` で `new Dragpos` に束縛し直します。
|
|
42
42
|
|
|
43
43
|
```JavaScript
|
|
44
44
|
document.addEventListener('mousedown', this.mouseDown.bind(this), false);
|
1
サンプルコードを追記
answer
CHANGED
|
@@ -2,4 +2,83 @@
|
|
|
2
2
|
|
|
3
3
|
- [JavaScript - javascriptのプログラム構造について(24798)｜teratail](https://teratail.com/questions/24798)
|
|
4
4
|
|
|
5
|
+
**(2017/09/06 11:05追記)**
|
|
6
|
+
サンプルコードを追記しました。
|
|
7
|
+
|
|
8
|
+
### addEventListener + handleEvent
|
|
9
|
+
|
|
10
|
+
`addEventListener` は第二引数に `handleEvent` プロパティを持つオブジェクトを指定した場合、`this` 値を指定したオブジェクトに束縛することが出来ます。
|
|
11
|
+
|
|
12
|
+
- [EventTarget.addEventListener - Web API インターフェイス | MDN](https://developer.mozilla.org/ja/docs/Web/API/EventTarget/addEventListener)
|
|
13
|
+
|
|
14
|
+
```JavaScript
|
|
15
|
+
function Dragpos (element) {
|
|
16
|
+
// 中略
|
|
17
|
+
|
|
18
|
+
document.addEventListener('mousedown', this, false);
|
|
19
|
+
document.addEventListener('mouseup', this, false);
|
|
20
|
+
document.addEventListener('mousemove', this, false);
|
|
21
|
+
}
|
|
22
|
+
|
|
23
|
+
Dragpos.prototype.handleEvent = function handleEvent (event) {
|
|
24
|
+
switch (event.type) {
|
|
25
|
+
case 'mousedown':
|
|
26
|
+
return this.mouseDown(event);
|
|
27
|
+
case 'mouseup':
|
|
28
|
+
return this.mouseUp(event);
|
|
29
|
+
case 'mousemove':
|
|
30
|
+
return this.mouseMove(event);
|
|
31
|
+
}
|
|
32
|
+
|
|
33
|
+
throw new Error('unknown event type');
|
|
34
|
+
};
|
|
35
|
+
```
|
|
36
|
+
|
|
37
|
+
### Function .prototype.bind
|
|
38
|
+
|
|
39
|
+
- [Function.prototype.bind() - JavaScript | MDN](https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Function/bind)
|
|
40
|
+
|
|
41
|
+
`event.currentTarget` に束縛された `this` 値を `Function .prototype.bind` で `new Dragpos` に束縛し直します。
|
|
42
|
+
|
|
43
|
+
```JavaScript
|
|
44
|
+
document.addEventListener('mousedown', this.mouseDown.bind(this), false);
|
|
45
|
+
document.addEventListener('mouseup', this.mouseUp.bind(this), false);
|
|
46
|
+
document.addEventListener('mousemove', this.mouseMove.bind(this), false);
|
|
47
|
+
```
|
|
48
|
+
|
|
49
|
+
### jQuery.proxy
|
|
50
|
+
|
|
51
|
+
- [jQuery.proxy() | jQuery API Documentation](https://api.jquery.com/jQuery.proxy/)
|
|
52
|
+
|
|
53
|
+
`Function .prototype.bind` と同様。
|
|
54
|
+
|
|
55
|
+
```JavaScript
|
|
56
|
+
document.addEventListener('mousedown', jQuery.proxy(this.mouseDown, this), false);
|
|
57
|
+
document.addEventListener('mouseup', jQuery.proxy(this.mouseUp, this), false);
|
|
58
|
+
document.addEventListener('mousemove', jQuery.proxy(this.mouseMove, this), false);
|
|
59
|
+
```
|
|
60
|
+
|
|
61
|
+
### jQuery.prototype.on + event.data
|
|
62
|
+
|
|
63
|
+
- [.on() | jQuery API Documentation](https://api.jquery.com/on/)
|
|
64
|
+
- [event.data | jQuery API Documentation](https://api.jquery.com/event.data/)
|
|
65
|
+
|
|
66
|
+
`this` から取り出すのを諦めて、`jQuery.prototype.on` の `event.data` 経由で `this` 値を参照します。
|
|
67
|
+
|
|
68
|
+
```JavaScript
|
|
69
|
+
function Dragpos (element) {
|
|
70
|
+
// 中略
|
|
71
|
+
|
|
72
|
+
jQuery(document).on('mousemove', {thisArg: this}, this.mouseMove);
|
|
73
|
+
}
|
|
74
|
+
|
|
75
|
+
Dragpos.prototype.mouseMove = function mouseMove (event) {
|
|
76
|
+
var thisArg = event.data.thisArg;
|
|
77
|
+
|
|
78
|
+
if (thisArg.drag) {
|
|
79
|
+
console.log(thisArg.panel);
|
|
80
|
+
}
|
|
81
|
+
};
|
|
82
|
+
```
|
|
83
|
+
|
|
5
84
|
Re: nnahito さん
|