Pointer events target is always the outer-most Polymer element

StackOverflow https://stackoverflow.com/questions/22506195

문제

I am porting polymer-ui-card from JS to Dart.

A difference is that in our project (by convention) we have an additional polymer element (app-element) that contains the entire application.

In JavaScript it looks like

<body unresolved>
  <div id="cards">
    <polymer-ui-card swipeable>Swipe Me!</polymer-ui-card>
    <polymer-ui-card swipeable>Swipe Me!</polymer-ui-card>
    <polymer-ui-card></polymer-ui-card>
    <polymer-ui-card swipeable>Swipe Me!</polymer-ui-card>
    <polymer-ui-card></polymer-ui-card>
  </div>
  ..
</body>

our Dart port looks like

<body unresolved>
  <app-element></app-element>
</body>

app-element has the content the body tag has in JS

<polymer-element name='app-element'>
  <template>
    <div id="cards">
      <polymer-ui-card swipeable>Swipe Me!</polymer-ui-card>
      <polymer-ui-card swipeable>Swipe Me!</polymer-ui-card>
      <polymer-ui-card></polymer-ui-card>
      <polymer-ui-card swipeable>Swipe Me!</polymer-ui-card>
      <polymer-ui-card></polymer-ui-card>
    </div>
  </template>
  ..
<polymer-element>

polymer-ui-card (same in JS and Dart)

<polymer-element name="polymer-ui-card" attributes="swipeable noCurve"
on-trackstart="{{trackStart}}" on-track="{{track}}" on-trackend="{{trackEnd}}" on-flick="{{flick}}">

The problem here is that the target for all pointer-events is the <app-element> instead of the <polymer-ui-card> elements.

Is this by design, or is this a problem that might be Dart only, or am I doing something wrong?

도움이 되었습니까?

해결책

Because of event retargeting it's no longer possible to talk about the target of an event without context.

Where the event listener is registered determines the scope of the DOM nodes that are identified on the event object.

If you put event listeners on <app-element> it will always be the target, because it has no children in the document scope.

라이센스 : CC-BY-SA ~와 함께 속성
제휴하지 않습니다 StackOverflow
scroll top