Come evitare gli eventi click sul corpo del documento (forse un bug in Cordova?)

Sono un principiante che cerca di sviluppare un gioco per cellulare con Kinetic Js e "phonegap build". Sto vivendo un problema che non so come affrontare. ho fatto alcuni test:Come evitare gli eventi click sul corpo del documento (forse un bug in Cordova?)

ho appena incollato this code here nel mio index.html e inviato il codice al phonegap build che ha creato il file apk dal codice HTML. L'app funziona abbastanza bene, ma se giochi un po 'potresti vedere un comportamento indesiderato: l'intero "stage" può essere cliccato con un tocco e quando succede (in realtà non è facile farlo apposta, ma succede) si sente il suono di clic standard del sistema operativo Android e si vede l'intera area evidenziata per un secondo. Proprio come se tu fossi in un browser e hai fatto clic su un link.
ho compilato (con PhoneGap build) la bussola simulatore legata here, funziona, ma quando si tocca la foto della bussola si innescano il suono del click. Questo è un effetto indesiderato che non è presente se lo si esegue su un browser/emulatore.
Ho appena messo qualche immagine png nel corpo evitando canvas e KineticJs. Inoltre non ho aggiunto alcun copione. In questo caso non vi è alcun evento click quando si tocca. Ma Se aggiungo
```
<script src="http://code.jquery.com/jquery-1.8.2.min.js"></script> 
<script src="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js"></script> 
```
(anche senza aggiunta di qualsiasi script) poi di nuovo toccare in grado di produrre l'evento click. Se rimuovo qualcuno delle due linee, l'evento click scompare. Anche se aggiungo
```
<script src="http://d3lp1msu2r81bx.cloudfront.net/kjs/js/lib/kinetic-v4.5.4.min.js"></script> 
```
di nuovo il corpo è cliccabile producendo luci e clic su suono. (Sto ancora parlando dell'app compilata con build su PhoneGap).

ho provato a sostituire <body> con <body onmousedown="return false;">, ma non ha aiutato. Ho anche provato con $("#object").click(function() {return false;}) con l'elemento div della tela, la foto e il corpo, non ha aiutato neanche. Ho cercato consigli per rendere le ancore non cliccabili per vedere se potevano essere applicate ma non ho trovato nulla di utile.

Qualche suggerimento?

Aggiornamento: Un'altra prova che non è stata risolta è: stage.off('tap click mousedown touchstart touchend dbltap');.

fonte

2013-07-04 Marco Disce

Hai provato ['stopPropogation'] (https://developer.mozilla.org/en-US/docs/Web/API/event.stopPropagation) e [' preventdefault'] (https: //developer.mozilla .org/it-IT/docs/Web/API/event.preventDefault)? –

'preventdefault' non è probabile che funzioni perché puoi vederlo al lavoro [qui] (http://www.w3schools.com/jquery/tryit.asp?filename=tryjquery_event_preventdefault) e puoi controllare che l'audio e il video gli effetti click in realtà si verificano comunque. –

Non sono sicuro di dover interrompere la propagazione di un evento qui perché l'evento click indesiderato si verifica come un singolo evento, non come propagazione di un altro. –

Hai provato questo?

stage.on('tap touchstart touchend', function() { 
    return false; 
});

Questo potrebbe aiutare anche:

canvas { 
    /*-webkit-tap-highlight-color: transparent; Some users reported this worked for them, although rgba(0,0,0,0); worked for the asker*/ 
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0); 
    -webkit-touch-callout: none; 
    -webkit-user-select: none; 
    -khtml-user-select: none; 
    -moz-user-select: none; 
    -ms-user-select: none; 
    user-select: none; 
    outline: none; 
}

Ecco un collegamento rapido su WebKit-touch-callout, non sono sicuro se sarà aiutare la vostra situazione ... http://phonegap-tips.com/articles/essential-phonegap-css-webkit-touch-callout.html

MODIFICA: Sembra che l'autore del divario telefonico suggerisca -webkit-tap-highlight-color: rgba(0, 0, 0, 0); per impedire la selezione del collegamento.Fonte qui: https://github.com/phonegap/phonegap-start/blob/master/www/css/index.css

fonte

2013-07-04 20:23:18 projeqht

Provato entrambi, non ha risolto alcun problema. Preventdefault in realtà impedisce solo l'azione che viene attivata da un clic, non la "clickability" (vedi ad esempio come si comporta [qui] (http://www.w3schools.com/jquery/tryit.asp?filename=tryjquery_event_preventdefault)) –

Oh .. Hmm che ne dici di stage.on ('tap', function() {return false;})? Scusa, non è così facile da provare per me dato che non ho impostato phonegap per testare le build per te: p – projeqht

Provato ora, non funziona neanche ... grazie, non mi importa se non l'hai fatto t test, sto solo cercando suggerimenti. –

Per disattivare cliccando sul tag di ancoraggio, si può semplicemente utilizzare alcuni trucchi css, per esempio, si hav un tag di ancoraggio con la classe 'notclickable', quindi aggiungere css,

.notclickable { 
    pointer-events: none; 
    cursor: default; 
    opacity:0.7; 
}

Ora può fare un tag di ancoraggio disattivato con l'aggiunta di questa classe

o si può provare questo per evitare che un clic,

$('.notclickable').live('click', function(event){ 
    event.preventDefault(); 
});

Spero che questo aiuti.

fonte

2013-07-05 08:47:50

Ciao, ho provato ad aggiungere il tuo css e ad applicare la classe "notclickable" ad alcuni elementi. Se applico la classe al corpo o al contenitore dello stage, non posso più trascinare/rilasciare la casella e in effetti posso produrre il suono di clic in uscita toccandolo (anche se non c'è l'evidenziazione). Se lo applico a un testo sul corpo, quando tocco il testo si verifica un evento click! Il testo è evidenziato e il suono è prodotto. Si noti che prima di applicare la classe toccando il testo ha prodotto l'evidenziazione sull'intero corpo del documento. –

Come evitare gli eventi click sul corpo del documento (forse un bug in Cordova?)

risposta

Problemi correlati