javascriptはイベントの泡出しとブラウザーのデフォルト行為を阻止します.
javascriptを使ってプログラムを作る時、一つの問題が発生します.これはあなたが事件を追加する時、ブラウザがデフォルトで泡型イベントをトリガするため、トリガしたくないイベントをトリガします.以下の関数でこの問題を解決できます.
1.事件の泡立ちを阻止し、捕獲型イベントのトリガメカニズムにする.
1
2
3
4
5
6
7
8
9
2.ボタンを押した後、ボタンがHTMLテキストボックスのオブジェクトに続きますか?
1
2
3
4
5
6
7
8
9
10
次のコードを通して、次の関数の効果を見ます.
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
関数1:IE 6.0、FireFox、Chrome、Operaはすべて有効です.
関数二:IEでのテストの効果はとても良いです.Chrome、Operaは無効で、FFにおいて、ボタンを押す場合、
keydown(e){stopDefault(e);alert('はキーの値'+e.keyCodeを押しました);
この話は断点を打って実行して、効果を達成することができます.
また、JQueryライブラリを使って、勉強を始めたばかりなので、ここで使ってみました.簡単な操作です.読めます.
別注参考資料:http://ooxxab.com/javascript-event-bubbling-and-prevent-the-default-behavior-of-the-browser.html 原文の住所:http://www.cnblogs.com/Ren_Lei/archive/2010/09/26/1836130.
1.事件の泡立ちを阻止し、捕獲型イベントのトリガメカニズムにする.
1
2
3
4
5
6
7
8
9
function stopBubble(e) { // ， IE if ( e && e.stopPropagation ) // W3C stopPropagation() e.stopPropagation(); else // ， IE window.event.cancelBubble = true; } 2.ボタンを押した後、ボタンがHTMLテキストボックスのオブジェクトに続きますか?
1
2
3
4
5
6
7
8
9
10
// function stopDefault( e ) { // (W3C) if ( e && e.preventDefault ) e.preventDefault(); //IE else window.event.returnValue = false; return false; } 次のコードを通して、次の関数の効果を見ます.
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
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"> <head><meta content="text/html; charset=utf-8" http-equiv="Content-Type" /><title> </title><script language="javascript" type="text/javascript" src="jquery-1.4.2.js"></script><script language="javascript" type="text/javascript">$(document).ready(function(){$('div.c1').click(function(e){alert(' div');});$('div.c2').click(function(e){alert(' div');stopBubble(e);});$(document).click(function(e){alert(' document');});$('#txt1').val('123');$('#txt1').click(function(e){stopBubble(e);});$('#txt1').keydown(function(e){stopDefault(e);alert(' '+e.keyCode); });}) function stopBubble(e) { // ， IE if ( e && e.stopPropagation ) // W3C stopPropagation() e.stopPropagation(); else // ， IE window.event.cancelBubble = true; } // function stopDefault( e ) { // (W3C) if ( e && e.preventDefault ) e.preventDefault(); //IE else window.event.returnValue = false; return false; }</script><style type="text/css">body{font-size:14px; }}.c1{ font-family:"Arial Unicode MS" }.c2{ font-family:helvetica,simsun,arial,clean }</style></head> <body> <div class="c1"> , C1, .</div><hr/> <div class="c2"> , C2, .</div><hr/> <div><input id="txt1" name="Text1" type="text" /></div><hr/> </body></html>上の効果テスト中、関数1:IE 6.0、FireFox、Chrome、Operaはすべて有効です.
関数二:IEでのテストの効果はとても良いです.Chrome、Operaは無効で、FFにおいて、ボタンを押す場合、
keydown(e){stopDefault(e);alert('はキーの値'+e.keyCodeを押しました);
この話は断点を打って実行して、効果を達成することができます.
また、JQueryライブラリを使って、勉強を始めたばかりなので、ここで使ってみました.簡単な操作です.読めます.
別注参考資料:http://ooxxab.com/javascript-event-bubbling-and-prevent-the-default-behavior-of-the-browser.html 原文の住所:http://www.cnblogs.com/Ren_Lei/archive/2010/09/26/1836130.