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
|
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript">
function ProcessEvent (event, eventName, elementName, stopPropagate) {
WriteInfo ("The " + elementName + " element got an " + eventName + " event.");
if (stopPropagate) {
if ('bubbles' in event) { // all browsers except IE before version 9
if (event.bubbles) {
event.stopPropagation ();
WriteInfo ("The propagation of the " + eventName + " event is stopped.");
}
else {
WriteInfo ("The " + eventName + " event cannot propagate up the DOM hierarchy.");
}
}
else { // Internet Explorer before version 9
// always cancel bubbling
event.cancelBubble = true;
WriteInfo ("The propagation of the " + eventName + " event is stopped.");
}
}
}
function WriteInfo (message) {
var info = document.getElementById ("info");
info.innerHTML += message + "<br />";
info.scrollTop = info.scrollHeight;
}
</script>
</head>
<body onclick="ProcessEvent (event, 'onclick', 'body', false);"
onfocus="ProcessEvent (event, 'onfocus', 'body', false);">
The following button allows the propagation of the onclick and onfocus events:<br />
<button onclick="ProcessEvent (event, 'onclick', 'first button', false);"
onfocus="ProcessEvent (event, 'onfocus', 'first button', false);">Allow propagation</button>
<br /><br />
The following button stops the propagation of the onclick and onfocus events:<br />
<button onclick="ProcessEvent (event, 'onclick', 'second button', true);"
onfocus="ProcessEvent (event, 'onfocus', 'second button', true);">Stop propagation</button>
<br /><br />
Information about the events:<br />
<div id="info" style="width:400px; height:200px; overflow:auto; background-color:#e0a0d0;"></div>
</body></html> |
Conflit entre deux onmouseover et deux onmouseout
Répondre avec citation
Partager