4

Googleクロージャーコンポーネントで使用するとstopPropagationが機能しない理由を理解しようとしています。browserEvents では正常に機能しますが、コンポーネントの Events では機能しません。以下のサンプル コードを参照して、ブラウザでこの現象を示してください。

<html>
<head>
    <script type="text/javascript" src="closure/goog/base.js"></script>
</head>
<body>

<div id="div1" style="border: 1px solid black; width: 500px; height: 300px; padding: 10px">
    <div id="div2"></div>
</div>

<script>
    goog.require('goog.dom');
    goog.require('goog.ui.CustomButton');
    goog.require('goog.ui.Component');
    goog.require('goog.ui.Control');
    goog.require('goog.style');
</script>

<script>
    var outerBtn = new goog.ui.Control();
    outerBtn.decorate(goog.dom.$('div1'));
    var innerBtn = new goog.ui.CustomButton('Inner Button');
    outerBtn.addChild(innerBtn, true);
    outerBtn.setSupportedState(goog.ui.Component.State.FOCUSED, false);
    innerBtn.setSupportedState(goog.ui.Component.State.FOCUSED, false)

    goog.style.setStyle(innerBtn.getElement(), {
        border : '1px solid red',
        height : '100px'
    });
    goog.events.listen(outerBtn, goog.ui.Component.EventType.ACTION, function() {
        console.info('outer');
    });
    goog.events.listen(innerBtn, goog.ui.Component.EventType.ACTION, function(e) {
        console.info('inner');
        e.stopPropagation();
    });
</script>
</body>
</html>
4

1 に答える 1

1

あなたの例は以下を出力します：

inner
outer

この場合、e.stopPropagationは正しく機能します。コンソール出力「outer」は、outerBtn自身のイベントハンドラーによるものです。innerBtnからバブルアップしていません。さらに、e.stopPropagationをコメントアウトすると、出力が次のように変更されます。

innner
outer
outer
于 2012-12-05T03:57:11.943 に答える