问谷歌闭合库: stopPropagation on components
EN

Stack Overflow用户

提问于 2012-12-04 19:54:32

回答 1查看 424关注 0票数 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>

javascript

google-closure-library

回答 1

Stack Overflow用户

发布于 2012-12-05 11:57:12

您的示例输出：

inner
outer

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

innner
outer
outer

票数 1

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/13702319

复制

相似问题

问谷歌闭合库: stopPropagation on components
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问谷歌闭合库: stopPropagation on componentsEN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问谷歌闭合库: stopPropagation on components
EN