Rendere un oggetto "trasparente" per gli eventi del mouse?

Sto lavorando a un progetto con HTML5 Canvas e KineticJS. Una sovrapposizione semitrasparente (un gruppo o strato KineticJS) viene posizionata su tutta la scena. Il problema è: gli eventi del mouse associati agli oggetti KineticJS sotto questo overlay non vengono elaborati.Rendere un oggetto "trasparente" per gli eventi del mouse?

Come posso rendere questa sovrapposizione (o qualsiasi altro oggetto) "trasparente" agli eventi del mouse?

NOTA: la domanda riguarda solo la tela, non ci sono altri elementi HTML che interferiscono con essa. (. Per rendere ciò chiaro è stato chiesto di seguito)

fonte

2013-04-04 Michael

Supponendo che si intende elementi HTML sono disposti sopra la tela, prova a guardare eventi del puntatore: pointer events at MDN

esempio

#foo { 
    pointer-events:none; 
}

fonte

2013-04-04 11:26:26 Graham

Vorrei usarlo anche, ma per favore sii consapevole che ha problemi di compatibilità tra i browser. – Rodik

Thx per la tua risposta. Ma, come ho modificato nel mio post iniziale, non intendo alcun elemento HTML. – Michael

Ah OK, questo ha senso. Guardando i documenti non riesco a vedere immediatamente alcun modo per farlo usando la loro API; questa sovrapposizione deve essere nello stesso elemento di tela del resto della scena? – Graham

Sì, è possibile fare clic-through top nodi per i nodi di fondo simili a puntatore-eventi: nessuno

Basta dire al vostro oggetto superiore non ascoltare gli eventi ... in questo modo:

myTopObject.setListening(false);

Ora tutti gli eventi del mouse diventeranno visibili all'oggetto inferiore.

Vai a questa SO rispondere per il codice e Fiddle: pointer-events in Kineticjs

fonte

2013-04-04 15:00:18 markE

C'è un modo per farlo con jQuery o Javascript normale? 'pointer-events: none' non è una soluzione neanche per me. – RaisinBranCrunch

Impostazione l'opacità del livello di set di livelli anche l'opacità nel livello di oggetto.

layer.setOpacity(0.1);

"Gli eventi del mouse associati agli oggetti KineticJS sotto questo overlay non vengono elaborati."

Hmm, gli eventi del mouse associati all'oggetto vengono elaborati anche se la sovrapposizione (livello) ha opacità di 0. questo sembra funzionare correttamente, non so in cosa ti trovi.

"Come posso rendere questa sovrapposizione (o qualsiasi altro oggetto)" trasparente "agli eventi del mouse?" Per me, mouseover/mouseout funzionano entrambi a livello di livello per renderlo semitrasparente.

layer.on('mouseover', function() { 
    this.setOpacity(0.5); 
    this.draw(); 
    }); 

    layer.on('mouseout', function() { 
    this.setOpacity(1); 
    this.draw(); 
    });

Ti manca layer.draw()?

fonte

2013-04-04 18:59:49 allenhwkim

Rendere un oggetto "trasparente" per gli eventi del mouse?

risposta

Problemi correlati