Javascript Google闭包库：组件上的stopPropagation_Javascript_Google Closure Library

Javascript Google闭包库：组件上的stopPropagation

javascript

Javascript Google闭包库：组件上的stopPropagation,javascript,google-closure-library,Javascript,Google Closure Library,我试图弄明白为什么StopRopagation在与google闭包组件一起使用时不起作用。它适用于browserEvents，但不适用于组件上的事件。请参阅下面的示例代码，该代码在浏览器上演示了这种现象： <html> <head> <script type="text/javascript" src="closure/goog/base.js"></script> </head> <body> <div i

我试图弄明白为什么StopRopagation在与google闭包组件一起使用时不起作用。它适用于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>


goog.require（'goog.dom'）；
goog.require（'goog.ui.CustomButton'）；
goog.require（'goog.ui.Component'）；
goog.require（'goog.ui.Control'）；
goog.require（“goog.style”）；
var outerBtn=new goog.ui.Control（）；
外部装饰（goog.dom.$（'div1'））；
var innerBtn=new goog.ui.CustomButton（“内部按钮”）；
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（）{
边框：“1px纯红”，
高度：“100px”
});
listen（outerBtn，goog.ui.Component.EventType.ACTION，function（））{
控制台信息（“外部”）；
});
goog.events.listen（innerBtn，goog.ui.Component.EventType.ACTION，函数（e）{
控制台信息（“内部”）；
e、 停止传播（）；
});

您的示例输出：

inner
outer

在这种情况下，e.StopperPogation工作正常。控制台输出“outer”是由outerBtn自己的事件处理程序产生的。不是从innerBtn冒出来的。此外，注释掉e.stopPropagation，输出将改变如下：

innner
outer
outer