javascript - pasar - onmouseover html ejemplo

Problema al resaltar los elementos de la página usando oyentes de eventos mouseover y mouseout

Question

Estoy creando una extensión de Firefox que obtiene cierta información sobre un elemento en una página web (por ejemplo, el atributo de id del elemento), al hacer clic en dicho elemento. También me gustaría implementar una función en la que colocar el puntero sobre el elemento lo resaltará.

Hay algunas soluciones existentes que esencialmente ya hacen esto. Parece que estas soluciones existentes (como la función "Seleccionar elemento con el mouse" en la herramienta "Inspector" de Firefox) esencialmente utilizan dos oyentes de eventos:

• Un oyente mouseover : resalta cualquier elemento que mueva su mouse sobre un elemento.
• Un detector de mouseout : elimina el resaltado cuando mueve el mouse fuera de un elemento. (De lo contrario, al mover el mouse sobre toda la página, ¡finalmente todo se resaltará!)

Intenté hacer mi propia implementación que usa esos dos oyentes ( onmouseover y onmouseout ). El resaltado se aplica de la misma manera que el linktargetfinder en este tutorial : cada vez que queremos resaltar un elemento, agregamos una propiedad link-target-finder-selected al atributo de class del elemento. Una referencia de link al archivo CSS se coloca en el head del documento HTML y se refiere a este código CSS:

.link-target-finder-selected {
    outline: 2px solid red !important;
}

Esta implementación es muy similar a lo que queremos, pero desafortunadamente, hay algunos problemas (probablemente relacionados).

Primero, con los cuadros de texto, el resaltado solo se aplica cuando el mouse está en el borde del cuadro de texto. Una vez que se mueve al interior del cuadro de texto, aparentemente se desencadena el evento de mouseout : el resaltado desaparece, aunque es claro para usted o para mí que el mouse aún está sobre el cuadro de texto. Parece que necesito forzar de algún modo el evento mouseout para que no se active hasta que mueva el mouse por completo fuera del cuadro de texto.

En segundo lugar, estoy teniendo un problema muy similar con los cuadros de selección múltiple. Pero también quiero que el comportamiento de los cuadros de selección múltiple sea algo no estándar. El comportamiento real es que un mouse-over resaltará el cuadro de selección; el resaltado desaparecerá a medida que comience a moverse dentro del cuadro de selección, y luego las opciones dentro del cuadro de selección se resaltarán a medida que se mueva sobre ellas. En cambio, me gustaría que mi complemento funcione de manera que, al ingresar al cuadro de selección, el cuadro se resalte, y no se resaltará o resaltará nada hasta que el mouse deje todo el cuadro. La solución a esto debería ser esencialmente la misma que la solución al problema del cuadro de texto.

Avíseme si tiene alguna idea sobre cómo puedo solucionar estos problemas.

Answer 1

prueba este código, cuando lo intenté no tuve que hacer el truco que hiciste para los cuadros de texto:

var lastBoxedEl;

function moused(e) {
    var target = e.target; //experiment, try e.currentTarget, e.originanalTarget
    if (lastBoxedEl) {
        lastBoxedEl.style.outline = ''none''
    }
    lastBoxedEl = target;
    target.style.outline = ''5px solid red'';
}
document.body.addEventListener(''mouseover'', moused, false);

estás usando esto en html ¿no? No sé cómo se comportaría esto en xul

Answer 2

Acabo de dar una solución a esto: https://.com/a/21598914/1828637

Hago lo mismo en mi complemento que espero lanzar pronto.

el evento mouseout no debería activarse cuando te mueves al centro de un campo de entrada, eso es raro.

si eso realmente sucede, entonces coloca el mouse sobre el campo de entrada, luego agrega un evento MouseLeave, (opuesto al evento moustEnter)

así que, para el cuerpo, agregue el detector de eventos por mouse, y cuando un elemento está en mousedover, debe des-subrayar el elemento previamente seleccionado (esto es para robustez) y debe agregar un evento mouseLeave que se desmarcará solo.

https://developer.mozilla.org/en-US/docs/DOM/DOM_event_reference/mouseenter