4

我试图弄清楚为什么 stopPropagation 在与谷歌闭包组件一起使用时不起作用。它适用于 browserEvents，但不适用于组件上的事件。请参阅下面的示例代码，在您的浏览器上演示该现象：

<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 回答