javascript - ejemplo - onmouseover()

¿Cómo simulo un mouseover en JavaScript puro que activa el CSS ": hover"?

Question

He intentado encontrar un código para simular el mouseover en Chrome, pero aunque el oyente "mouseover" es despedido, ¡nunca se establece la declaración CSS "hover"!

Intenté también hacerlo:

//Called within mouseover listener
theElement.classList.add("hover");

Pero nada parece cambiar el elemento a lo que se declara en su declaración de hover .

es posible?

Answer 1

Fondo

Me encontré con esta pregunta al intentar escribir pruebas automáticas, para verificar que un cierto conjunto de elementos en una página dada reciban el conjunto de propiedades CSS establecidas por el CSS para eventos de desplazamiento.

Si bien la respuesta anterior explica perfectamente, por qué no es posible desencadenar simplemente el evento hover por JS y luego probar el valor de css de interés, responde a la pregunta inicial "¿Cómo simulo un mouseover en JavaScript puro que activa el CSS ": hover"? " solo en parte

Renuncia

Esta no es una solución de rendimiento. Lo usamos solo para pruebas automatizadas, donde el rendimiento no es una preocupación.

Solución

simulateCssEvent = function(type){
    var id = ''simulatedStyle'';

    var generateEvent = function(selector){
        var style = "";
        for (var i in document.styleSheets) {
            var rules = document.styleSheets[i].cssRules;
            for (var r in rules) {
                if(rules[r].cssText && rules[r].selectorText){
                    if(rules[r].selectorText.indexOf(selector) > -1){
                        var regex = new RegExp(selector,"g")
                        var text = rules[r].cssText.replace(regex,"");
                        style += text+"/n";
                    }
                }
            }
        }
        $("head").append("<style id="+id+">"+style+"</style>");
    };

    var stopEvent = function(){
        $("#"+id).remove();
    };

    switch(type) {
        case "hover":
            return generateEvent(":hover");
        case "stop":
            return stopEvent();
    }
}

Explicación

generateEvent lee todos los archivos css, reemplaza: coloca el cursor sobre una cuerda vacía y la aplica. Esto tiene el efecto de que todos los estilos de desplazamiento se aplican. Ahora uno puede buscar un estilo aullado y regresar al estado inicial al detener la simulación.

¿Por qué aplicamos el efecto de desplazamiento para todo el documento y no solo para el elemento de interés obteniendo el de las hojas y luego realizamos un elemento.css (...)?

Hecho así, el estilo se aplicaría en línea, esto anularía otros estilos, que podrían no ser anulados por el estilo de desplazamiento css original.

¿Cómo simularía ahora el vuelo estacionario para un solo elemento?

Esto no está funcionando, entonces mejor no. Si es necesario, puede consultar con element.is (selectorOfInterest) si el estilo se aplica a su elemento y solo usar esos estilos.

Ejemplo

En Jasmine, por ejemplo, ahora puedes realizar:

describe("Simulate CSS Event", function() {
    it("Simulate Link Hover", function () {
      expect($("a").css("text-decoration")).toBe("none");
      simulateCssEvent(''hover'');
      expect($("a").css("text-decoration")).toBe("underline");
      simulateCssEvent(''stop'');
      expect($("a").css("text-decoration")).toBe("none");
    });
});

Answer 2

Lo que suelo hacer en este caso es agregar una clase usando javascript ... y adjuntar el mismo CSS como :hover a esta clase

Intenta usar

theElement.addEventListener(''onmouseover'', 
    function(){ theElement.className += '' hovered'' });

O para navegadores más antiguos:

theElement.onmouseover = function(){theElement.className += '' hovered''};

por supuesto, tendrá que usar onmouseout para eliminar la clase "suspendida" cuando abandone el elemento ...

Answer 3

No puedes. No es un evento de confianza .

Los eventos generados por el agente de usuario, ya sea como resultado de la interacción del usuario o como resultado directo de los cambios al DOM, son confiables para el agente de usuario con privilegios que no se otorgan a los eventos generados por script a través del DocumentEvent.createEvent ("Evento") método, modificado mediante el método Event.initEvent (), o enviado a través del método EventTarget.dispatchEvent (). El atributo isTrusted de los eventos de confianza tiene un valor de true, mientras que los eventos que no son de confianza tienen un valor de atributo isTrusted de false.

La mayoría de los eventos que no son de confianza no deben desencadenar acciones predeterminadas , con la excepción de los eventos Click o DOMActivate.

Debe agregar una clase y agregarla / eliminarla en los eventos mouseover / mouseout manualmente.

Answer 4

Puede simular el evento mouseover de esta manera:

HTML

<div id="name">My Name</div>

JavaScript

var element = document.getElementById(''name'');
element.addEventListener(''mouseover'', function() {
  console.log(''Event triggered'');
});

var event = new MouseEvent(''mouseover'', {
  ''view'': window,
  ''bubbles'': true,
  ''cancelable'': true
});

element.dispatchEvent(event);