onMouseMove non triggers l’elemento in Chrome

Supponiamo di avere un listener onMouseMove che registra solo la posizione xey del mouse.

Se espongo un elemento select e muovo il mouse sugli elementi esposti, l’evento onMouseMove non si triggers mai.

Penso che potrebbe avere qualcosa a che fare con questo:

IE, JQuery, Hovering and Option Elements

Qualcuno sa come aggirare questo? Nello specifico, vorrei ottenere un’istanza dell’elemento mi sto spostando in un dato momento.

Preferirei non modificare gli elementi o poiché il mio codice viene iniettato da un’estensione chrome e sarebbe logico modificare ogni pagina per questo motivo.

Come sospettavi, gli eventi del mouse non funzionano su una selezione / opzione in Chrome

Possibili soluzioni alternative potrebbero essere:

  • Utilizzare un listener onclick quando un’opzione è selezionata.
  • Disegna opzioni come drop down usando DHTML
  • Utilizzare una selezione con l’attributo “dimensione”, in genere utilizzato per il multiselect. Le opzioni all’interno di una selezione con un attributo “dimensione” reagiscono agli eventi del mouse in Chrome.

Ho creato un esempio della terza opzione qui:

http://jsfiddle.net/SNLzA/

Questo clona l’originale seleziona e nasconde il clone. Al clone viene assegnato un attributo size in modo che possa reactjs agli eventi del mouse. Quindi, quando si fa clic sulla selezione originale, viene mostrato temporaneamente il clone che è stato stilizzato in modo da assomigliare alle opzioni disponibili. Quindi, quando un utente fa clic su un’opzione, chiudiamo il clone e impostiamo il valore nella selezione originale. Un ascoltatore di eventi click è collegato al corpo per chiudere il clone quando non su un’opzione.

HTML

  

CSS

 select { display: block; width: 60px; } 

JS

 var select = document.getElementById("s"), options = select.getElementsByTagName("option"), clone = select.cloneNode(true), body = document.body, isOpen = false, closeSelect = function() { select.removeAttribute("size"); clone.setAttribute("style", "display: none;"); isOpen = false; select.value = options[clone.selectedInput]; }, openSelect = function(e) { isOpen = true; clone.setAttribute("style", "display: auto;"); select.setAttribute("size", options.length); clone.value = options[select.selectedInput]; }; clone.setAttribute("style", "display: none;"); body.insertBefore(clone, select); body.addEventListener("click", function(e) { if (isOpen === true && e.target != select) { closeSelect(); } }); select.addEventListener("click", openSelect); for (i = 0; i < options.length; i++) { options[i].addEventListener("click", function(e) { closeSelect(); }); options[i].addEventListener("mouseover", function(e) { console.log("on option: " + e.target.value); }); }