it-swarm.com.de

Wie simuliere ich einen Mouseover in reinem JavaScript, der das CSS ": hover" aktiviert?

Ich habe versucht, Code zu finden, um mouseover in Chrome) zu simulieren, aber obwohl der Listener "mouseover" ausgelöst wird, wird die CSS-Deklaration "hover" niemals gesetzt!

Ich habe auch versucht zu tun:

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

Aber nichts scheint das Element zu ändern, was in seiner hover -Deklaration deklariert ist.

Ist das möglich?

66
Don Rhummy

Das kannst du nicht. Es ist kein vertrauenswürdiges Ereignis .

Ereignisse, die vom Benutzeragenten entweder als Ergebnis einer Benutzerinteraktion oder als direkte Folge von Änderungen am DOM generiert werden, werden vom Benutzeragenten mit Berechtigungen als vertrauenswürdig eingestuft, die für Ereignisse gelten, die vom Skript über DocumentEvent.createEvent generiert werden ("Event") - Methode, geändert mit der Event.initEvent () - Methode oder ausgelöst mit der EventTarget.dispatchEvent () - Methode. Das isTrusted-Attribut von vertrauenswürdigen Ereignissen hat den Wert true, während nicht vertrauenswürdige Ereignisse den isTrusted-Attributwert false haben.

Die meisten nicht vertrauenswürdigen Ereignisse sollten keine Standardaktionen auslösen, mit Ausnahme von Click- oder DOMActivate-Ereignissen.

Sie müssen eine Klasse hinzufügen und diese bei Mouseover-/Mouseout-Ereignissen manuell hinzufügen/entfernen.

91

Sie können das Mouseover-Ereignis folgendermaßen simulieren:

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);
17
lbpeppers

Hintergrund

Ich bin auf diese Frage gestoßen, als ich versuchte, automatisierte Tests zu schreiben, um zu überprüfen, ob eine bestimmte Gruppe von Elementen auf einer bestimmten Seite die CSS-Eigenschaften hat, die von der CSS für Hover-Ereignisse festgelegt wurden.

Während die obige Antwort perfekt erklärt, warum es nicht möglich ist, einfach das Hover-Ereignis von JS auszulösen und dann einen Beweis für einen interessanten CSS-Wert zu führen, beantwortet sie die ursprüngliche Frage: "Wie simuliere ich einen Mouseover in reinem JavaScript, das aktiviert wird? das CSS ": hover"? " nur teilweise.

Haftungsausschluss

Dies ist keine performante Lösung. Wir verwenden es nur für automatisierte Tests, bei denen die Leistung keine Rolle spielt.

Lösung

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();
    }
}

Erläuterung

generateEvent liest alle CSS-Dateien, ersetzt: hover durch eine leere Zeichenfolge und wendet diese an. Dies hat zur Folge, dass alle: Hover-Stile angewendet werden. Jetzt kann man nach einem gebremsten Stil suchen und durch Stoppen der Simulation in den Ausgangszustand zurückkehren.

Warum wenden wir den Hover-Effekt für das gesamte Dokument und nicht nur für das Element von Interesse an, indem wir das aus den Blättern holen und dann eine element.css (...) ausführen?

Wenn Sie dies tun, wird der Stil inline angewendet. Dies würde andere Stile außer Kraft setzen, die möglicherweise nicht durch den ursprünglichen CSS-Hover-Stil außer Kraft gesetzt werden.

Wie würde ich jetzt den Schwebeflug für ein einzelnes Element simulieren?

Das ist nicht performant, also besser nicht. Wenn Sie müssen, können Sie anhand der Datei element.is (selectorOfInterest) prüfen, ob der Stil für Ihr Element gilt, und nur diese Stile verwenden.

Beispiel

In Jasmine können Sie z. jetzt durchführen:

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");
    });
});
16
Amstutz

In diesem Fall füge ich normalerweise eine Klasse mit Javascript hinzu und füge das gleiche CSS wie das :hover zu dieser Klasse

Versuchen Sie es mit

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

Oder für ältere Browser:

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

sie müssen natürlich onmouseout verwenden, um die "schwebende" Klasse zu entfernen, wenn Sie das Element verlassen ...

5
Yotam Omer

Sie können pseudo: styler verwenden, eine Bibliothek, die CSS-Pseudoklassen auf Elemente anwenden kann.

(async () => {
  let styler = new PseudoStyler();
  await styler.loadDocumentStyles();
  document.getElementById('button').addEventListener('click', () => {
    const element = document.getElementById('test')
    styler.toggleStyle(element, ':hover');
  })
})();

Haftungsausschluss: Ich bin Mitautor dieser Bibliothek. Wir haben es so konzipiert, dass es zusätzlich originale Stylesheets unterstützt, insbesondere für die Verwendung in Chrome Erweiterungen, bei denen Sie wahrscheinlich nicht die Kontrolle über die CSS-Regeln der Seite haben.

2
FThompson

SCSS

.hover {
    @extend :hover;
}
0
Polv