forked from RubyLouvre/mass-Framework
-
Notifications
You must be signed in to change notification settings - Fork 0
/
event_fix.js
171 lines (162 loc) · 7.04 KB
/
event_fix.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
//=========================================
// 事件补丁模块
//==========================================
define("event_fix", !! document.dispatchEvent, ["$node"], function($) {
//模拟IE678的reset,submit,change的事件代理
var rformElems = /^(?:input|select|textarea)$/i
var facade = $.event = {
special: {},
fixMouse: function(event) {
// 处理鼠标事件 http://www.w3help.org/zh-cn/causes/BX9008
var doc = event.target.ownerDocument || document; //safari与chrome下,滚动条,视窗相关的东西是放在body上
var box = document.compatMode == "BackCompat" ? doc.body : doc.documentElement
event.pageX = event.clientX + (box.scrollLeft >> 0) - (box.clientLeft >> 0);
event.pageY = event.clientY + (box.scrollTop >> 0) - (box.clientTop >> 0);
//如果不存在relatedTarget属性,为它添加一个
if(!event.relatedTarget && event.fromElement) { //mouseover mouseout
event.relatedTarget = event.fromElement === event.target ? event.toElement : event.fromElement;
}
//标准浏览判定按下鼠标哪个键,左1中2右3
var button = event.button
//IE event.button的意义 0:没有键被按下 1:按下左键 2:按下右键 3:左键与右键同时被按下 4:按下中键 5:左键与中键同时被按下 6:中键与右键同时被按下 7:三个键同时被按下
event.which = [0, 1, 3, 0, 2, 0, 0, 0][button]; //0现在代表没有意义
},
fixKeyboard: function(event) {
event.which = event.charCode != null ? event.charCode : event.keyCode;
}
};
var special = facade.special
function simulate(type, elem, event) {
event = new $.Event(event);
$.mix({
type: type,
isSimulated: true
});
$.event.trigger.call(elem, event);
if(event.defaultPrevented) {
event.preventDefault();
}
}
special.change = {
setup: function() {
if(rformElems.test(this.nodeName)) {
// IE doesn't fire change on a check/radio until blur; trigger it on click
// after a propertychange. Eat the blur-change in special.change.handle.
// This still fires onchange a second time for check/radio after blur.
if(this.type === "checkbox" || this.type === "radio") {
$(this).bind("propertychange._change", function(event) {
if(event.originalEvent.propertyName === "checked") {
this._just_changed = true;
}
});
$(this).bind("click._change", function(event) {
if(this._just_changed && !event.isTrigger) {
this._just_changed = false;
}
// Allow triggered, simulated change events (#11500)
simulate("change", this, event);
});
}
return false;
}
// Delegated event; lazy-add a change handler on descendant inputs
$(this).bind("beforeactivate._change", function(e) {
var elem = e.target;
if(rformElems.test(elem.nodeName) && !$._data(elem, "_change_attached")) {
$(elem).bind("change._change", function(event) {
if(this.parentNode && !event.isSimulated && !event.isTrigger) {
simulate("change", this.parentNode, event);
}
$._data(elem, "_change_attached", true);
})
}
});
},
handle: function(event) {
var elem = event.target;
// Swallow native change events from checkbox/radio, we already triggered them above
if(this !== elem || event.isSimulated || event.isTrigger || (elem.type !== "radio" && elem.type !== "checkbox")) {
return event.handleObj.handler.apply(this, arguments);
}
},
teardown: function() {
facade.remove(this, "._change");
return !rformElems.test(this.nodeName);
}
}
special.submit = {
setup: function() {
// Only need this for delegated form submit events
if(this.tagName === "FORM") {
return false;
}
// Lazy-add a submit handler when a descendant form may potentially be submitted
$(this).bind("click._submit keypress._submit", function(e) {
// Node name check avoids a VML-related crash in IE (#9807)
var elem = e.target,
form = /input|button/i.test(elem.tagName) ? elem.form : undefined;
if(form && !$._data(form, "_submit_attached")) {
facade.bind(form, {
type: "submit._submit",
callback: function(event) {
event._submit_bubble = true;
}
});
$._data(form, "_submit_attached", true);
}
});
// return undefined since we don't need an event listener
},
postDispatch: function(event) {
// If form was submitted by the user, bubble the event up the tree
if(event._submit_bubble) {
delete event._submit_bubble;
if(this.parentNode && !event.isTrigger) {
simulate("submit", this.parentNode, event);
}
}
},
teardown: function() {
if(this.tagName == "FORM") {
return false;
}
facade.remove(this, "._submit");
}
}
return $;
})
/**
* input事件的支持情况:IE9+,chrome+, gecko2+, opera10+,safari+
* 2012.5.1 fix delegate BUG将submit与reset这两个适配器合而为一
* 2012.10.18 重构reset, change, submit的事件代理
* 2013.1.9 将$.event.fix的一些逻辑分离到event_fix模块,形成fixMouse, fixKeyboard方法
<!DOCTYPE HTML>
<html>
<head>
<title>change</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script src="mass.js" ></script>
<script>
$.require("ready,event", function(){
$("form").on( "change", function() { $.log(this.tagName) })
$(document).on( "change",'select', function() { $.log(this.tagName) })
})
</script>
</head>
<body >
<form action="javascript:void 0">
<select>
<option>
1111111
</option>
<option>
222222
</option>
<option>
33333
</option>
</select>
</form>
</body>
</html>
*/