CSS ": hover" ı etkinleştiren saf JavaScript'te fareyle üzerine gelme simülasyonunu nasıl yapabilirim?

mouseoverChrome'da simüle etmek için kod bulmaya çalışıyordum, ancak "fareyle üzerine gelme" dinleyicisi çalıştırılsa da, CSS "üzerine gelme" bildirimi hiçbir zaman ayarlanmadı!

Ben de denedim:

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

Ancak hiçbir şey, hoverbeyanında beyan edilen unsuru değiştirmiyor gibi görünüyor .

Mümkün mü?

Yapamazsın. Güvenilir bir olay değil .

Kullanıcı aracısı tarafından, kullanıcı etkileşiminin bir sonucu olarak veya DOM'daki değişikliklerin doğrudan bir sonucu olarak oluşturulan olaylara, DocumentEvent.createEvent aracılığıyla komut dosyası tarafından oluşturulan olaylara tanınmayan ayrıcalıklarla kullanıcı aracısı tarafından güvenilir. ("Event") yöntemi, Event.initEvent () yöntemi kullanılarak değiştirildi veya EventTarget.dispatchEvent () yöntemi aracılığıyla gönderilir. Güvenilir olayların isTrusted özniteliğinin true değeri varken, güvenilmeyen olayların isTrusted öznitelik değeri false şeklindedir.

Çoğu güvenilmeyen olay , tıklama veya DOMActivate olayları dışında varsayılan eylemleri tetiklememelidir .

Bir sınıf eklemeniz ve bunu mouseover / mouseout olaylarına manuel olarak eklemeniz / kaldırmanız gerekir.

Fareyle üzerine gelme olayını şu şekilde simüle edebilirsiniz:

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

Arka fon

Otomatik testler yazmaya çalışırken, belirli bir sayfadaki tüm öğelerin aldığı belirli bir dizi öğenin, üzerine gelme etkinlikleri için css tarafından ayarlanan bazı css özelliklerine sahip olduğunu doğrulamak için bu soruya rastladım.

Yukarıdaki yanıt mükemmel bir şekilde açıklasa da, neden sadece JS ile fareyle üzerine gelme olayını tetiklemenin ve ardından ilgili bazı css değerlerini araştırmanın mümkün olmadığını mükemmel bir şekilde açıklasa da, "CSS'yi etkinleştiren saf JavaScript'te fareyle üzerine gelmeyi nasıl simüle ederim" sorusunu yanıtlıyor. : vurgulu ”?" sadece kısmen.

Feragatname

Bu yüksek performanslı bir çözüm değildir. Bunu yalnızca performansın önemli olmadığı otomatik testler için kullanıyoruz.

Çözüm

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

Açıklama

generateEvent tüm css dosyalarını okur,: hover'ı boş bir dizeyle değiştirir ve uygular. Bu, tüm: vurgulu stillerin uygulandığı bir etkiye sahiptir. Artık, güçlü bir stil araştırılabilir ve Simülasyonu durdurarak başlangıç ​​durumuna geri dönülebilir.

Fareyle üzerine gelme efektini neden sadece ilgilendiğimiz öğe için değil de tüm belgeye uygulayıp ardından bir element.css (...) gerçekleştiriyoruz?

Bu şekilde yapıldığında, stil satır içi olarak uygulanır, bu, orijinal css vurgulu stil tarafından geçersiz kılınmayabilecek diğer stilleri geçersiz kılar.

Şimdi tek bir öğe için fareyle üzerine gelme simülasyonunu nasıl yapabilirim?

Bu performans değil, o yüzden yapmasan iyi olur. Gerekirse, stilin öğeniz için geçerli olup olmadığını ve yalnızca bu stilleri kullanıp kullanmadığını element.is (selectorOfInterest) ile kontrol edebilirsiniz.

Misal

Jasmine'de örneğin şimdi şunları gerçekleştirebilirsiniz:

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

Ne genellikle bu durumda aynısını javascript kullanan bir sınıf ekleyerek .. ve bağlantı olduğu CSSkadar :hoverbu sınıfa

Kullanmayı dene

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

Veya daha eski tarayıcılar için:

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

onmouseoutelementi terk ettiğinizde "hovered" sınıfı kaldırmak için kullanmanız gerekecek ...

Öğelere CSS sözde sınıfları uygulayabilen bir kitaplık olan pseudo: styler'ı kullanabilirsiniz .

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

Feragatname: Bu kitaplığın ortak yazarıyım. Bunu, özellikle sayfanın CSS kuralları üzerinde denetim sahibi olamayacağınız durumlarda Chrome uzantılarında kullanmak üzere, çapraz kaynak stil sayfalarını ek olarak desteklemek için tasarladık.

CSS'yi dom manipülasyonundan sonra incelemek istediğinizi varsayıyorum, ancak farenizi devtool'lara geri götürdüğünüzde, olay artık o html öğesinde etkin değil. Muhtemelen javascript etkinlikleriniz için devtools'da: hover seçeneği gibi bir şeye sahip olmak istersiniz. Bu mevcut değil, ancak simüle edebilirsiniz.

1. Geliştirici araçlarınızı açın ve etkinleştirmek için üzerine tıklayın.
2. İlgilendiğiniz öğe üzerinde olayı tetikleyin.
3. Fareyi hareket ettirmeden ctrl + shift + p ile devtools komut panelini açın ve klavyenizle 'javascript'i devre dışı bırak'ı seçin.

Javascript devre dışı bırakıldığı için, öğeleri tekrar değiştirme şansı bulamaz. Devtool'lara gidip css ve html'yi sanki geziniyormuş, tıklıyor veya onunla başka bir şey yapıyormuş gibi inceleyebilirsiniz. Bitirdikten sonra, komut paneline tekrar gidin ve 'javascript'i etkinleştir'i seçin.