Jak zasymulować najechanie kursorem myszy w czystym JavaScript, który aktywuje „: hover” w CSS?

Próbowałem znaleźć kod do symulacji mouseoverw Chrome, ale mimo że detektor „najechania myszą” zostaje uruchomiony, deklaracja CSS „najechanie kursorem” nigdy nie jest ustawiona!

Próbowałem też zrobić:

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

Ale wydaje się, że nic nie zmienia elementu na to, co jest zadeklarowane w jego hoverdeklaracji.

czy to możliwe?

Nie możesz. To nie jest zaufane wydarzenie .

Zdarzenia generowane przez agenta użytkownika, w wyniku interakcji użytkownika lub bezpośrednio w wyniku zmian w DOM, są zaufane przez agenta użytkownika z uprawnieniami, które nie są nadawane zdarzeniom generowanym przez skrypt za pośrednictwem DocumentEvent.createEvent („Event”), zmodyfikowanej za pomocą metody Event.initEvent () lub wysłanej za pomocą metody EventTarget.dispatchEvent (). Atrybut isTrusted zaufanych zdarzeń ma wartość true, podczas gdy niezaufane zdarzenia mają wartość false atrybutu isTrusted.

Większość niezaufanych zdarzeń nie powinna wywoływać domyślnych działań , z wyjątkiem kliknięć i zdarzeń DOMActivate.

Musisz dodać klasę i ręcznie dodać / usunąć ją przy zdarzeniach najechania myszą / myszy.

Możesz zasymulować zdarzenie najechania myszą w następujący sposób:

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

tło

Natknąłem się na to pytanie, próbując napisać testy automatyczne, aby sprawdzić, czy określony zestaw elementów na danej stronie, które wszystkie otrzymują, ma pewien zestaw właściwości css ustawionych przez css dla zdarzeń po najechaniu.

Chociaż powyższa odpowiedź doskonale wyjaśnia, dlaczego nie można po prostu wywołać zdarzenia najechania kursorem przez JS, a następnie sondować jakąś interesującą wartość css, odpowiada ona na wstępne pytanie „Jak zasymulować najechanie kursorem myszy w czystym JavaScript, który aktywuje CSS” :unosić się"?" tylko częściowo.

Zrzeczenie się

To nie jest wydajne rozwiązanie. Używamy go tylko do testów automatycznych, gdzie wydajność nie jest problemem.

Rozwiązanie

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

Wyjaśnienie

geneEvent odczytuje wszystkie pliki css,, zastępuje: hover pustym ciągiem znaków i stosuje go. W efekcie stosowane są style all: hover. Teraz można zbadać styl howered i wrócić do stanu początkowego, zatrzymując symulację.

Dlaczego stosujemy efekt najechania na cały dokument, a nie tylko na interesujący nas element, pobierając z arkuszy i wykonując element.css (...)?

W ten sposób styl zostałby zastosowany w tekście, co spowodowałoby zastąpienie innych stylów, które mogą nie zostać zastąpione przez oryginalny styl najechania css.

Jak mógłbym teraz zasymulować najechanie na pojedynczy element?

To nie jest wydajne, więc lepiej tego nie robić. Jeśli musisz, możesz sprawdzić za pomocą elementu element.is (selectorOfInterest), czy styl ma zastosowanie do twojego elementu i używać tylko tych stylów.

Przykład

W Jasmine możesz teraz np. Wykonać:

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

To, co zwykle robię w tym przypadku, to dodanie klasy za pomocą javascript .. i dołączenie tego samego CSSco :hoverdo tej klasy

Spróbuj użyć

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

Lub w przypadku starszych przeglądarek:

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

będziesz oczywiście musiał użyć, onmouseoutaby usunąć klasę „najechaną” po opuszczeniu elementu ...

Możesz użyć pseudo: styler , biblioteki, która może nakładać pseudoklasy CSS na elementy.

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

Zastrzeżenie: jestem współautorem tej biblioteki. Zaprojektowaliśmy go tak, aby dodatkowo obsługiwał arkusze stylów z różnych źródeł, szczególnie do użytku w rozszerzeniach Chrome, w których prawdopodobnie brakuje kontroli nad regułami CSS strony.

Zakładam, że chcesz sprawdzić CSS po manipulacji w domenie, ale gdy tylko przesuniesz mysz z powrotem do devtools, zdarzenie nie jest już aktywne dla tego elementu html. Prawdopodobnie chciałbyś mieć opcję: hover w devtools dla zdarzeń javascript. To nie istnieje, ale możesz to zasymulować.

1. Otwórz devtools i kliknij je, aby uaktywnić.
2. Wywołaj zdarzenie na elemencie, który Cię interesuje.
3. Bez poruszania myszą otwórz panel poleceń devtools za pomocą ctrl + shift + p i wybierz opcję „wyłącz javascript” za pomocą klawiatury.

Ponieważ javascript jest wyłączony, nie ma szansy na ponowne zmodyfikowanie elementu (ów). Możesz przejść do devtools i sprawdzić css i html, tak jakbyś najechał kursorem, kliknął lub zrobił coś innego. Gdy skończysz, ponownie przejdź do panelu poleceń i wybierz opcję „włącz javascript”.