Skip to content
This repository has been archived by the owner on Dec 19, 2017. It is now read-only.

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

Closed
DartBot opened this issue Jun 5, 2015 · 13 comments
Closed

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

DartBot opened this issue Jun 5, 2015 · 13 comments
Labels

Comments

@DartBot
Copy link

DartBot commented Jun 5, 2015

<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
Copy link
Author

DartBot commented Jun 5, 2015

<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
Copy link
Author

DartBot commented Jun 5, 2015

<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
Copy link
Author

DartBot commented Jun 5, 2015

<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
Copy link
Author

DartBot commented Jun 5, 2015

<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
Copy link
Author

DartBot commented Jun 5, 2015

<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
Copy link
Author

DartBot commented Jun 5, 2015

<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
Copy link
Author

DartBot commented Jun 5, 2015

<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
Copy link
Author

DartBot commented Jun 5, 2015

<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
Copy link
Author

DartBot commented Jun 5, 2015

<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
Copy link
Author

DartBot commented Jun 5, 2015

<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
Copy link
Author

DartBot commented Jun 5, 2015

<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
Copy link
Author

DartBot commented Jun 5, 2015

<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
Copy link
Author

DartBot commented Jun 5, 2015

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

Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
Development

No branches or pull requests

1 participant