[polymer] event.stopPropagation() has no effect (for on-click)

[DartBot]

<img src="https://avatars.githubusercontent.com/u/313066?v=3" align="left" width="96" height="96"hspace="10"> Issue by hpoul
Originally opened as dart-lang/sdk#14169

---

i have two nested <div> elements with on-click handlers. calling event.stopPropagation() in the inner element's click handler seems to have no effect. I think this should prevent the outer event handler from beeing called?

What steps will reproduce the problem?

simple polymer web component, html:
    <polymer-element name="stop-propagation">
      <template>
        <div on-click="outerClicked">
          Outer.
          <div on-click="innerClicked">
            Inner.
          </div>
        </div>
      </template>
      
      <script type="application/dart" src="stoppropagation.dart"></script>
    </polymer-element>

dart code:
  void innerClicked(Event event, var detail, Node target) {
    event.stopPropagation();
    print('inner clicked');
  }
  void outerClicked(Event event, var detail, Node target) {
    print('outer clicked');
  }

What is the expected output? What do you see instead?

i think wenn clicking on 'inner' only 'inner clicked' should be shown, but also 'outer clicked' is called.

What version of the product are you using?
Dart Editor version 0.8.1_r28355
testing in dartium coming with dart editor (31.0.1612.0 (219647))

Please provide any additional information below.
since i stumbled upon the problem when porting my web-ui app, it's probably a problem in polymer, not dart.. couldn't find any open issues in polymer.js issue tracker though.

my two files i've used for testing: https://github.com/hpoul/dart-polymer-dart-examples/tree/b9f9ac052b15ea97250daad97a1a45c2124ef251/web/stoppropagationtest

[DartBot]

<img src="https://avatars.githubusercontent.com/u/2909286?v=3" align="left" width="48" height="48"hspace="10"> Comment by madsager

---

Added Area-Polymer, Triaged labels.

[DartBot]

<img src="https://avatars.githubusercontent.com/u/1081711?v=3" align="left" width="48" height="48"hspace="10"> Comment by jmesserly

---

This is probably caused by the fact that we can't check "cancelBubble" in Polymer.dart because it's deprecated. So I had to change the code. I'll see if I can workaround that...

---

cc @blois.
Added this to the M8 milestone.
Added Library-Polymer label.

[DartBot]

<img src="https://avatars.githubusercontent.com/u/2152569?v=3" align="left" width="48" height="48"hspace="10"> Comment by blois

---

I don't think that cancelBubble even reflects this- playing with it quickly stopPropagation does not impact cancelBubble.

[DartBot]

<img src="https://avatars.githubusercontent.com/u/1081711?v=3" align="left" width="48" height="48"hspace="10"> Comment by jmesserly

---

hmmm. I wonder if it reproduces in polymer.js... might be a dupe of Polymer/polymer#208

[DartBot]

<img src="https://avatars.githubusercontent.com/u/313066?v=3" align="left" width="48" height="48"hspace="10"> Comment by hpoul

---

i'm not sure if polymer 208 is related, but from my perspective it's kind of the opposite :-) but i've ran into both.. 208 is being unable to listen to blur/focus events because they don't propagate, which is a requirement it seems for on-* to work, while click events do propagate, but i was unable to prevent propagation.. so might be related, but the issues i found in the polymer.js issue tracker related to bubbling suggest that stopPropagation works there, but have only used polymer.dart yet :-) thx

[DartBot]

<img src="https://avatars.githubusercontent.com/u/1081711?v=3" align="left" width="48" height="48"hspace="10"> Comment by jmesserly

---

Removed this from the M8 milestone.
Added this to the Later milestone.

[DartBot]

<img src="https://avatars.githubusercontent.com/u/2049220?v=3" align="left" width="48" height="48"hspace="10"> Comment by sigmundch

---

Removed this from the Later milestone.
Added this to the M9 milestone.

[DartBot]

<img src="https://avatars.githubusercontent.com/u/8616782?v=3" align="left" width="48" height="48"hspace="10"> Comment by clayberg

---

Removed this from the M9 milestone.
Added this to the 1.1 milestone.

[DartBot]

<img src="https://avatars.githubusercontent.com/u/2049220?v=3" align="left" width="48" height="48"hspace="10"> Comment by sigmundch

---

Removed this from the 1.1 milestone.
Added this to the 1.2 milestone.

[DartBot]

<img src="https://avatars.githubusercontent.com/u/1081711?v=3" align="left" width="48" height="48"hspace="10"> Comment by jmesserly

---

Removed Area-Polymer label.
Added area-pkg, Pkg-Polymer labels.

[DartBot]

<img src="https://avatars.githubusercontent.com/u/1081711?v=3" align="left" width="48" height="48"hspace="10"> Comment by jmesserly

---

Removed Library-Polymer label.

[DartBot]

<img src="https://avatars.githubusercontent.com/u/2156198?v=3" align="left" width="48" height="48"hspace="10"> Comment by kasperl

---

Removed this from the 1.2 milestone.
Added this to the 1.6 milestone.

[DartBot]

<img src="https://avatars.githubusercontent.com/u/2049220?v=3" align="left" width="48" height="48"hspace="10"> Comment by sigmundch

---

I just adapted the example to work with the latest polymer (0.11) and it seems to be working great. The stopPropagation succesfully stops the event from firing on the outer element.

---

Added Fixed label.