Wie kann ich simulieren einen mouseover in reinem JavaScript, aktiviert die CSS ":hover"?

Ich habe versucht zu finden, Codes zu simulieren mouseover im Chrome, aber obwohl das "mouseover" - listener gefeuert wird, die CSS "hover" Erklärung niemals gesetzt!

Versuchte ich auch tun:

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

Aber es scheint nichts zu ändern, das element, was erklärt wird, in seiner hover Erklärung.

Ist das möglich?

Ich denke, was er tun will, ist Kraft :hover Zustand auf ein element.
Yup, Sie haben Recht. Ich missverstanden.
Dies ist nicht ein Duplikat. Die andere Frage ist die nach jQuery. Diese Frage ist über die Reine JS.
Die OQ enthalten die jQuery-tag. Dies ist eine doppelte.
Die Frage (und deren Beantwortung), ist über die Reine JS. Glauben Sie nicht, es ist mehr wahrscheinlich, dass Sie mistagged.

InformationsquelleAutor Don Rhummy | 2013-06-21

90

Können Sie nicht. Es ist nicht eine trusted Veranstaltung.

Ereignisse, die generiert werden, indem der user-agent, entweder als ein Ergebnis von Benutzer-Interaktion, oder als eine direkte Folge der änderungen der DOM, das Vertrauen der user-agent mit Privilegien, die wird nicht gewährt, Ereignisse, die durch die Skript über die DocumentEvent.createEvent("Event") - Methode, modifiziert Verwendung der Veranstaltung.initEvent () - Methode, oder abgesetzt über das EventTarget.dispatchEvent () - Methode. Die isTrusted Attribut von vertrauenswürdigen Ereignissen, hat den Wert true, während nicht Vertrauenswürdige Ereignisse haben eine isTrusted-Attribut den Wert false.

Meisten nicht Vertrauenswürdige Ereignisse sollten nicht auslösen, Standard-Aktionen, mit Ausnahme der auf-oder DOMActivate Veranstaltungen.

Müssen Sie eine Klasse hinzufügen und hinzufügen/entfernen, auf die mouseover/mouseout-events manuell.

Es spielt eigentlich keine Antwort warum. Es ist nur die Frage ändert.
es ist nicht eine Vertrauenswürdige Ereignis, denn es war nicht vom Benutzer initiiert werden. So steht es gibt es rechts in dem Zitat oben in meiner Antwort. Es ist buchstäblich, was die Antwort beginnt mit".
Ich zitiere "mit Ausnahme des auf-oder DOMActivate events". Was ist das Besondere an der "hover", das es nicht in diese Ausnahme-Liste? Warum sind wir nennen dürfen "focus", aber nicht "zeigen"? Dies sind die Fragen, die wir beantworten müssen, ist die Beantwortung alles andere ist nur ändern der Frage.
Ich würde davon ausgehen, dass die hover - (und kombiniert mit Klick oder mouse-up & down für drag & drop), konnte sich benehmen oder erscheinen wie die Entführung eines Benutzers-system (wenn Sie ignorieren die Automatisierung Fällen), so ist es nicht ideal, zu unterstützen. Klicken Sie auf kann ich nicht sagen, aber den Fokus würde es erlauben, auto-Fokus, zu einem Ziel-form-Feld oder element der Website-designer will, dass der Benutzer, um den Fokus auf zum Beispiel sagen, ein text-Feld mit dem fehlenden oder fehlerhaften Angaben (z.B. Formular-Feld-Validierungen). Aber das ist nur meine Annahmen.
Ja, so absurd es klingt, man kann es scheinen, dass der Fokus wurde verursacht durch eine Interaktion, wo es nicht so war. In der Praxis - browser-APIs wird gerne gehorchen, der Skillung und ignorieren Fokus und klicken Sie auf als nicht Vertrauenswürdige Ereignisse (zumindest in Chrome). Versuchen Sie es zum Beispiel simuliert einen Klick auf eine Erweiterung installieren-button für eine chrome-Erweiterung und sehen, was passiert 🙂

InformationsquelleAutor Benjamin Gruenbaum
16

Hintergrund

Stolperte ich über diese Frage, während Sie versuchen, um automatisierte tests zu schreiben, um zu überprüfen, dass eine bestimmte Gruppe von Elementen auf einer Seite alle erhalten haben, die einen Satz von css-Eigenschaften festlegen, indem Sie die css für hover-events.

Während die obige Antwort perfekt erklärt, warum es nicht möglich ist, einfach auslösen des hover-event von JS und dann nehmen Sie einen Beweis für einige css-Wert von Interesse, Sie beantworten die erste Frage "Wie kann ich simulieren einen mouseover in reinem JavaScript, aktiviert die CSS ":hover"?" nur teilweise.

Haftungsausschluss

Dies ist nicht eine performante Lösung. Wir verwenden es nur für automatisierte Tests, in denen die Leistung nicht von Belang.

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();
    }
}
```
Erklärung

generateEvent liest alle css-Dateien , ersetzt :hover mit einer leeren string-und die gilt es. Dies hat den Effekt, dass alle den :hover-Stile angewendet werden. Nun kann man mit einer Sonde für eine howered Stil und setzen Sie wieder in den ursprünglichen Zustand durch beenden der Simulation.

Warum verwenden wir den hover-Effekt für das gesamte Dokument und nicht nur für das element des Interesses, indem man die Blätter und führen Sie dann ein element.css(...)?

Gemacht, dass der Stil angewendet werden würde inline, dies hätte Vorrang vor anderen Stilen, die möglicherweise nicht überschrieben werden, indem die original-css-hover-Stil.

Wie würde ich jetzt simulieren Sie die hover für ein einzelnes element?

Dies ist nicht performant, also besser nicht. Wenn Sie müssen, Sie überprüfen könnten, mit dem element.ist(selectorOfInterest), wenn der Stil gilt für das element und verwenden Sie nur jene Stile.

Beispiel

Jasmin können Sie z.B. 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");
    });
});
```
Diese Antwort ist Super!!! Leider, es scheitert an den letzten Versionen von Chrome auf den Seiten mit stylesheets serviert, die von anderen hosts aufgrund Chrome Begrenzung des Zugangs zu einem cross-origin-requests. Siehe meine Antwort für eine Lösung, die dies unterstützt 🙂
thx für den Hinweis und die nette Zugabe!

InformationsquelleAutor Amstutz

Können Sie simulieren das mouseover-Ereignis wie diesem:

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

InformationsquelleAutor lbpeppers

5

Dem, was ich normalerweise tun, in diesem Fall ist das hinzufügen einer Klasse mit javascript.. und das anbringen der gleiche CSS als :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'};
```
werden Sie natürlich verwenden onmouseout zu entfernen, die "schwebte" Klasse, beim verlassen des Elements...

Dies wird nicht tun, was der OP fordert, obwohl es wahrscheinlich mehr-oder-weniger in die richtige Richtung. Es wäre besser, verwenden moderne event-handler-Anlage-Techniken.
sorry, Frage falsch verstanden
Nun, es gibt addEventListener() für moderne Browser, wie ein Anfang ...
nicht gut genug..
Nicht gut genug? Es ist ein "reines" JavaScript", und es ist in der Tat fügen Sie eine Funktion, wie ein handler für ein Ereignis. Im Internet-Explorer, der (fast) gleichwertige attachEvent() verwendet werden würde.

InformationsquelleAutor Yotam Omer
2

Können Sie pseudo:styler, eine Bibliothek, die anwenden können CSS-pseudo-Klassen als Elemente.
```
(async () => {
  let styler = new PseudoStyler();
  await styler.loadDocumentStyles();
  document.getElementById('button').addEventListener('click', () => {
    const element = document.getElementById('test')
    styler.toggleStyle(element, ':hover');
  })
})();
```
Disclaimer: ich bin Mitautor dieser Bibliothek. Wir haben es speziell entwickelt, um zusätzlich zu unterstützen cross-origin-stylesheets, die speziell für den Einsatz im Chrome-Erweiterungen, wo Sie wahrscheinlich die mangelnde Kontrolle über die CSS-Regeln der Seite.

InformationsquelleAutor FThompson

Schreibe einen Kommentar

Du musst angemeldet sein, um einen Kommentar abzugeben.

Hintergrund

Haftungsausschluss

Lösung

Erklärung

Beispiel