CODEWITHSUNDEEP
ember.js
Sushant
Sushant

Reputation: 1414

Handling click and doubleclick on same view in emberjs

I have a component which require to handle both click and double click. Its code is like

Template : 

<div class="routine_week routine-border box-height-fix fl pointer">
{{mark-down marking}}
</div>

Component

import Ember from 'ember';

export default Ember.Component.extend({
    marking : 0,
    isMarkable : false,

    click : function(){
        //click here
    },

    doubleClick : function(){
        //double click here
    }


});

Now issue is that doubleClick never got fired. If it does it also fires two click events. How can I ensure that doubleclick event will not interact with click

Upvotes: 2

Views: 1704

Answers (2)

voodoologic
voodoologic

Reputation: 69

<p {{on 'dblclick' this.doubleClick}}></p>

Upvotes: 0

Sushant
Sushant

Reputation: 1414

Ember is so powerful that I was able to imitate DoubleClick using SingleClick event. Its all depend upon Ember.run Loop. Here is the code for anyone like me trying to do that -

//capture event for singleClick only execute if there is no doubleClick
eventIO : null,

//ember actually execute the doubleClick but it also gives two singleClick
doubleClick : function(){

    var eventIO = this.get('eventIO');

    //check if there is any event for single click, disable it
    if(eventIO != null){
        Ember.run.cancel(eventIO);
        this.set('eventIO',null);
    }

    // do the stuff with double click

},

// our click event which got executed in both single / double click
click : function(){

    var eventIO = this.get('eventIO');

    //if this is the first click , schedule it for later after 500 ms
    if(eventIO === null)
    {
        var eventIO =  Ember.run.later(this,function(){

            //do single click stuff

            var eventIO = this.get('eventIO');

            ///clear additional events
            if(eventIO != null){
                Ember.run.cancel(eventIO);
                this.set('eventIO',null);
            }

        },500);

        //register event to the component
        this.set('eventIO',eventIO);
    }

},

Upvotes: 3

Related Questions