2013-03-22 21 views
6

Ho un'applicazione grafica in cui utilizzo Backbone.js per collegare gestori separati per il mouse e fare doppio clic sugli eventi su diverse "aree" dell'immagine del grafico.MouseUp e DoubleClick entrambi collegati a funzioni di gestione eventi separate utilizzando Backbone js

Ho bisogno del mouseup per rilevare se l'utente ha fatto clic sul pulsante sinistro o sulla parte "area" dell'immagine del grafico e in base al fatto che sto reindirizzando il mio flusso. Inoltre richiedo il doppio clic per ingrandire o ridurre a icona il mio pannello contenente l'immagine del grafico.

Ecco il problema. Poiché ogni doppio clic richiama implicitamente mouseup, sto ottenendo che la mia funzionalità di ingrandimento/riduzione interferisce con le funzioni di clic sinistro/destro del pulsante.

ho provato con varie tecniche come timeout per controllare se singolo mouse fino Seguono doppio clic (come suggerito in thread:. Need to cancel click/mouseup events when double-click event detected

non ha funzionato per me Ho anche diversi oggetti del vista contenente il grafico sulla stessa pagina in modo da associare un ID univoco a ogni gestore di eventi per differenziarli Ho anche provato il semplice metodo di ripristino set di flag per rilevare il doppio clic e impedire il mouse se si verificava un doppio clic ma poiché nella gerarchia degli eventi il ​​mouse si verifica prima del doppio clic,

Tutto sommato, per favore aiuto! Grazie in anticipo

risposta

3

Seguendo i consigli forniti in the answer you linked, devi solo per evitare il bouncing la richiamata per un MouseUp e verificare se un secondo clic si verifica in un determinato periodo.

Ipotizzando una vista definita in questo modo (http://jsfiddle.net/nikoshr/4KSZx/)

var V = Backbone.View.extend({ 
    events: { 
     'mouseup button': 'onmouseup', 
     'dblclick button': 'ondblclick' 
    }, 

    onmouseup: function() { 
     console.log('mouseup'); 
    },  
    ondblclick: function() { 
     console.log('dblclick'); 
    } 
}); 

si potrebbe modificarlo e "cancella" l'evento MouseUp:

var V = Backbone.View.extend({ 
    events: { 
     'mouseup button': _.debounce(function(e) { 
      if (this.doucleckicked) { 
       this.doucleckicked = false; 
      } else { 
       this.onmouseup.call(this, e); 
      } 
     }, 300), 
     'dblclick button': function(e) { 
      this.doucleckicked = true; 
      this.ondblclick.call(this, e); 
     } 
    }, 

    onmouseup: function() { 
     console.log('mouseup'); 
    },  
    ondblclick: function() { 
     console.log('dblclick'); 
    } 
}); 

e una demo http://jsfiddle.net/4KSZx/6/

+0

Grazie mille! Lo provo subito :) – Vidhi

+1

Mi dispiace per il ritardo nel trasmettere questo, ma la soluzione ha funzionato a meraviglia! Grazie mille ancora! complimenti! :) – Vidhi

0

Non so se ho capito quello che hai detto, ma ... Prova ora:

$(document).click(function(event) { 
    // Page variables of the mouse event 
    var pageX = event.pageX; 
    var pageY = event.pageY; 
    var someFunctions = function() { 
     /* 
     if(pageX == 300 && pageY == 120) { 
      event.preventDefault(); 
      // do functions 
     } 
     */ 
    }; 

    // start the functions 
    someFunctions(); 
}); 

$(document).dblclick(function() { 
    // functions here to dblclick  
}); 

Scusate se non era questo, ma ho provato.

+0

in realtà ho provato lo stesso usando il clic di jquery e dblclick. Questo non è quello che intendevo. Ma apprezzo lo sforzo. Molte grazie. Raffinerò presto la domanda. – Vidhi