CODEWITHSUNDEEP
polymer
Walid Ammar
Walid Ammar

Reputation: 4126

Polymer ondblclick not working

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?

Upvotes: 1

Views: 2526

Answers (3)

Luis Roberto
Luis Roberto

Reputation: 472

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

Upvotes: 0

Walid Ammar
Walid Ammar

Reputation: 4126

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>

Upvotes: 2

G&#252;nter Z&#246;chbauer
G&#252;nter Z&#246;chbauer

Reputation: 657666

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.

Upvotes: 0

Related Questions