CODEWITHSUNDEEP
javascriptgoogle-closure-library
Lefteris
Lefteris

Reputation: 59

Google closure library: stopPropagation on components

I am trying to figure out why stopPropagation does not work when used with google closure components. It works fine for browserEvents but not for Events on components. Please see example code below that demonstrates on your browser the phenomenon:

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

Upvotes: 4

Views: 430

Answers (1)

ama-ch
ama-ch

Reputation: 11

Your example outputs:

inner
outer

In this case, e.stopPropagation works correctly. The console output "outer" is due to outerBtn's own event handler. Not bubbled up from innerBtn. Furthermore, comment out e.stopPropagation, the output will change as below:

innner
outer
outer

Upvotes: 1

Related Questions