Htmlイベント発泡
10793 ワード
spanはinputとは違って、イベントの泡が親ラベルに飲み込まれると思っていたが、テストイベントの泡を書いたDemoは、そうは思わなかったことに気づいた.また、event.stopPropagation()およびevent.stopImmediatePropagation()はspanがaラベルに浸かるのを阻止することはできませんが、簡単で乱暴なreturn falseはできます.
詳細:https://en.wikipedia.org/wiki/Event_bubbling、http://javascript.info/bubbling-and-capturing
1 DOCTYPE html>
2 <html>
3 <head>
4 <title>Bubblingtitle>
5 <style type="text/css">
6 * {
7 font-size:30px;
8 }
9 div {
10 border: 1px blue solid;
11 }
12 span {
13 border: 1px blue solid;
14 }
15 style>
16 <script type="text/javascript">
17 function setforeColor(sender) {
18 sender.style.color = "red";
19 }
20
21 function setbgColor(sender) {
22 sender.style.background = "green";
23 return false;
24 }
25 script>
26 head>
27 <body>
28 <div>
29 <span onclick="setforeColor(this)">span tagspan> in div
30 div>
31 <br>
32 <div>
33 <input type="button" value="Button" onclick="setforeColor(this)"/> in div
34 div>
35 <br>
36 <a href="https://www.baidu.com" style="text-decoration:none;display:block;">
37 <span onclick="setforeColor(this);return false">span tagspan> in anchor
38 a>
39 <br>
40 <a href="https://www.baidu.com" style="text-decoration:none;display:block;">
41 <span onclick="setbgColor(this)">span tagspan> in anchor
42 a>
43 body>
44 html>詳細:https://en.wikipedia.org/wiki/Event_bubbling、http://javascript.info/bubbling-and-capturing