1、ポップアップボックス
< スタイル> .mask { 位置:固定されました。 表示:なし; 幅:100%; 高さ:100%; トップ:0 ; 左:0 ; 背景:RGBA(0,0,0、0.6); } .mask .loginファイル { 幅:500pxなど。 高さ:350px ; バックグラウンド:#FFF ; マージン:150ピクセルのオート; } </ スタイル> < HREF = "#" >登录</ A > < divのクラス= "マスク" ID = "マスク" > < divのクラス= "ログイン" ID = "ログイン" > </ DIV > </ DIV > < スクリプト> のvar A = document.getElementsByTagName(" ]; VaRのマスク= のdocument.getElementById(" マスク" )。 a.onclick = 関数(イベント){ mask.style.display = " ブロック" 。 // 阻止冒泡 イベント= イベント|| window.event; もし(イベント|| するevent.stopPropagation()){ するevent.stopPropagation()。 } 他{ event.cancelBubble = 真。 } } document.onclick = 関数(イベント){ イベント= イベント|| window.event; // タッチイベントオブジェクトの取得時の上に渡されると互換性 のvar AAA = event.target ?event.target:event.srcElementを、 IF (aaa.id !== " ログイン" ){ mask.style.display = " なし" ; } } </ スクリプト>
バブリングイベント:
cancalBubblt()とのstopPropagation():共通では彼らは、ブラウザのデフォルトのイベントバブリング動作を防ぐために使用されていることです。非常に頻繁にcancelBubbleはW3C標準に準拠していない、だけでIEをサポートしていますので、組み合わせて使用する。違いは、のstopPropagation()はFirefoxや他のブラウザのためのW3C標準に属しますが、IEをサポートしていないということです。
構文:e.stopPropagation()、イベントの状態を代表して、代わって配信イベントパラメータe。
jQueryのバブルとデフォルトの動作を防止するための方法は次のように書くこともできます。
event.preventDefault() - > falseを返す;するevent.stopPropagationを() - > falseを返します。