3

Aaron Gustafson 著の「Adaptive Web Design」という本を読んでいますが、理解できない JavaScript がありました。調査中に、false を返すことと e.preventDefault を返すことの違いを見つけました。また、JavaScript のバブリング効果についても少し知っており、バブリングを停止するには e.stopPropagation() を使用できることを理解するようになりました (少なくともブラウザではありません)。

私はフィドルで遊んでいましたが、うまくいきませんでした。バブリングが有効になる方法と関係があるのではないかと思います（ルートから要素へ、そしてその逆？）。

document.body.onclick = function (e) {
    alert("Fired a onclick event!");
    e.preventDefault();
    if ('bubbles' in e) { // all browsers except IE before version 9
        if (e.bubbles) {
            e.stopPropagation();
            alert("The propagation of the event is stopped.");
        } else {
            alert("The event cannot propagate up the DOM hierarchy.");
        }
    } else { // Internet Explorer before version 9
        // always cancel bubbling
        e.cancelBubble = true;
        alert("The propagation of the event is stopped.");
    }
}

フィドルは次のとおりです: http://jsfiddle.net/MekZii/pmekd/ (修正済みリンク) 編集: 間違ったリンクをコピーして貼り付けました! その修正されました！

だから私が見たいのは、アンカーをクリックしたときに、div で使用されている onclick が実行されないことです (これは実際のケースではなく、単なる研究ケースです!)

4

3 に答える 3

9

イベントは、クリックされた要素からドキュメント オブジェクトまでバブリングします。

div のイベント ハンドラーは、body のイベント ハンドラーの前に発生します (body は DOM の祖先であるため)。

イベントが本体に到達するまでには、div での動作を防ぐには遅すぎます。

于 2013-07-16T15:51:14.960 に答える
2

わかりました、最初のフィドルが間違っていることがわかりました。機能する別の例を見つけ、stopPropagation() がどのように機能するかを示します。

var divs = document.getElementsByTagName('div');

for(var i=0; i<divs.length; i++) {
  divs[i].onclick = function( e ) {
    e = e || window.event;
    var target = e.target || e.srcElement;

    //e.stopPropagation ? e.stopPropagation() : ( e.cancelBubble = true );
    if ('bubbles' in e) { // all browsers except IE before version 9
        if (e.bubbles) {
            e.stopPropagation();
            alert("The propagation of the event is stopped.");
        } else {
            alert("The event cannot propagate up the DOM hierarchy.");
        }
    } else { // Internet Explorer before version 9
        // always cancel bubbling
        e.cancelBubble = true;
        alert("The propagation of the event is stopped.");
    }

    this.style.backgroundColor = 'yellow';

    alert("target = " + target.className + ", this=" + this.className );

    this.style.backgroundColor = '';
  }
}

http://jsfiddle.net/MekZii/wNGSx/2/

例は、いくつかの読み物とともに次のリンクにあります: http://javascript.info/tutorial/bubbling-and-capturing

于 2013-07-17T00:25:05.303 に答える