Polymer ondblclick not working

Question

I am trying to use ondblclick inside polymer element, but I cannot get it to work.

I know that I can just use ondblclick="someFunction()" but I need to access double clicked element model, something like on-tap event:

event.target.templateInstance.model.myModel;

<script src="http://www.polymer-project.org/platform.js"></script>
<script src="http://www.polymer-project.org/polymer.js"></script>


<polymer-element name="dblclick-test">
  <template>
    <button on-dblclick="{{btnDblClick}}" on-tap="{{btnTap}}">{{btnText}}</button>
  </template>
  <script>
    
    Polymer({
      btnText: 'double click me',
      btnDblClick: function(event) {
        // in real code I need to use
        // event.target.templateInstance.model
        // just like on-tap's event param
        
        this.btnText = 'Hi, u dbl clicked me !!!!!!';
      },
      btnTap: function(event) {
        this.btnText = 'Hi, u clicked me !';
      }
    })
  </script>
</polymer-element>

<dblclick-test></dblclick-test>

Is there any polymeric way to do it?

score 2 · Accepted Answer · edited May 23 '17 at 12:29

First

I was missing the declarative event mapping by using ondbleclick instead of on-dblclick, thanks to ebidel edit to my question.

Even though the above example won't work.

Second

To solve the conflict between on-tap and on-dblclick, I used something like the following in my code:

<script src="http://www.polymer-project.org/platform.js"></script>
<script src="http://www.polymer-project.org/polymer.js"></script>

<polymer-element name="dblclick-test">
  <template>
    <button on-tap="{{btnTap}}">{{btnText}}</button>
  </template>
  <script>
    Polymer({
      btnText: 'double click me',
      btnDblClick: function(event) {
        this.btnText = 'Hi, u dbl clicked me !!!!!!';
      },
      btnTap: function(event) {
        if (this.tappedOneTime) {
          this.btnDblClick();
          this.tappedOneTime = false;
        } else {
          this.btnText = 'Hi, u clicked me !';
        }

        this.tappedOneTime = true;
        // reset flag after 800ms
        this.async(function() {
          this.tappedOneTime = false;
        }, null, 800);
      }
    })
  </script>
</polymer-element>

<dblclick-test></dblclick-test>

score 0 · Answer 2 · edited May 23 '17 at 11:58

0

I assume tap is also fired on dblclick this makes it difficult. My (and other answers) to this question Distinguish between onClick and onDoubleClick on same element to perform different actions in Dart show possible solutions.

edited May 23 '17 at 11:58

Community

1
1

answered Oct 16 '14 at 14:42

Günter Zöchbauer

623,577
216
2,003
1,567

The problem is `on-dblclick` is never being called, you may run the code snippet above ... – Walid Ammar Oct 16 '14 at 15:57

score 0 · Answer 3 · answered Aug 04 '17 at 19:11

0

Don't use on-tap and on-dblclick together, if you need both behaviors use on-click instead on-tap.

<my-elem on-click="clicked" on-dblclick="dblclicked">

answered Aug 04 '17 at 19:11

Luis Roberto

375
4
10

Polymer ondblclick not working

3 Answers3