Làm cách nào để mô phỏng thao tác di chuột qua trong JavaScript thuần túy kích hoạt CSS “: hover”?

Tôi đã cố gắng tìm mã để mô phỏng mouseovertrong Chrome nhưng mặc dù trình nghe "di chuột qua" được kích hoạt, khai báo CSS "di chuột" không bao giờ được đặt!

Tôi cũng đã thử làm:

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

Nhưng dường như không có gì thay đổi phần tử thành những gì được khai báo trong hoverkhai báo của nó .

Điều này có khả thi không?

Bạn không thể. Đây không phải là một sự kiện đáng tin cậy .

Các sự kiện được tạo bởi tác nhân người dùng, do tương tác của người dùng hoặc là kết quả trực tiếp của các thay đổi đối với DOM, được tác nhân người dùng tin cậy với các đặc quyền không dành cho các sự kiện được tạo bởi tập lệnh thông qua DocumentEvent.createEvent ("Sự kiện"), được sửa đổi bằng phương thức Event.initEvent () hoặc được gửi qua phương thức EventTarget.dispatchEvent (). Thuộc tính isTrusted của các sự kiện đáng tin cậy có giá trị là true, trong khi các sự kiện không đáng tin cậy có giá trị thuộc tính isTrusted là false.

Hầu hết các sự kiện không đáng tin cậy sẽ không kích hoạt các hành động mặc định , ngoại trừ các sự kiện nhấp chuột hoặc Kích hoạt DOM.

Bạn phải thêm một lớp và thêm / xóa lớp đó trên các sự kiện di chuột qua / di chuột theo cách thủ công.

Bạn có thể mô phỏng sự kiện di chuột qua như sau:

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

Lý lịch

Tôi tình cờ gặp câu hỏi này trong khi cố gắng viết các bài kiểm tra tự động, để xác minh rằng một tập hợp các phần tử nhất định trên một trang nhất định đều nhận được một số thuộc tính css do css đặt cho các sự kiện di chuột.

Mặc dù câu trả lời ở trên giải thích một cách hoàn hảo, tại sao không thể chỉ đơn giản kích hoạt sự kiện di chuột bằng JS và sau đó thăm dò một số giá trị css quan tâm, nhưng nó trả lời câu hỏi ban đầu "Làm cách nào để mô phỏng một lần di chuột qua trong JavaScript thuần túy kích hoạt CSS" :bay lượn"?" chỉ một phần.

Khước từ

Đây không phải là một giải pháp hiệu quả. Chúng tôi chỉ sử dụng nó để kiểm tra tự động, nơi hiệu suất không phải là mối quan tâm.

Giải pháp

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

Giải trình

createEvent đọc tất cả các tệp css, thay thế: di chuột bằng một chuỗi trống và áp dụng nó. Điều này có tác dụng, tất cả: kiểu di chuột đều được áp dụng. Bây giờ người ta có thể thăm dò để tìm kiểu hú và đặt trở lại trạng thái ban đầu bằng cách dừng Mô phỏng.

Tại sao chúng ta áp dụng hiệu ứng di chuột cho toàn bộ tài liệu chứ không chỉ cho phần tử quan tâm bằng cách lấy từ các trang tính và sau đó thực hiện một element.css (...)?

Xong như vậy, kiểu sẽ được áp dụng nội tuyến, kiểu này sẽ ghi đè các kiểu khác, kiểu này có thể không bị kiểu di chuột css ban đầu ghi đè.

Bây giờ tôi sẽ mô phỏng di chuột như thế nào cho một phần tử?

Đây không phải là hiệu suất, vì vậy tốt hơn không nên. Nếu phải, bạn có thể kiểm tra với element.is (selectorOfInterest) nếu kiểu áp dụng cho phần tử của bạn và chỉ sử dụng những kiểu đó.

Thí dụ

Trong Jasmine, bạn có thể thực hiện:

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

Những gì tôi thường làm gì trong trường hợp này là thêm một lớp sử dụng javascript .. và gắn cùng CSSlà :hoverđể lớp này

Hãy thử sử dụng

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

Hoặc đối với các trình duyệt cũ hơn:

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

tất nhiên bạn sẽ phải sử dụng onmouseoutđể loại bỏ lớp "di chuột" khi bạn rời khỏi phần tử ...

Bạn có thể sử dụng pseudo: styler , một thư viện có thể áp dụng các lớp giả CSS cho các phần tử.

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

Tuyên bố từ chối trách nhiệm: Tôi là đồng tác giả của thư viện này. Chúng tôi đã thiết kế nó để hỗ trợ thêm các biểu định kiểu gốc chéo, đặc biệt để sử dụng trong các tiện ích mở rộng của Chrome, nơi bạn có thể thiếu kiểm soát đối với các quy tắc CSS của trang.

Tôi giả sử bạn muốn kiểm tra CSS sau khi thao tác dom, nhưng ngay sau khi bạn di chuyển chuột trở lại devtools, sự kiện sẽ không hoạt động trên phần tử html đó nữa. Bạn có thể muốn có một cái gì đó như tùy chọn: di chuột trong devtools cho các sự kiện javascript của bạn. Điều đó không tồn tại, nhưng bạn có thể mô phỏng nó.

1. Mở devtools của bạn và nhấp vào nó để kích hoạt nó.
2. Kích hoạt sự kiện trên yếu tố bạn quan tâm.
3. Không di chuyển chuột, hãy mở bảng lệnh devtools bằng ctrl + shift + p và chọn 'vô hiệu hóa javascript' bằng bàn phím của bạn.

Vì javascript bị tắt nên nó không có cơ hội sửa đổi lại (các) phần tử. Bạn có thể vào devtools và kiểm tra css và html như thể bạn đang di chuột, nhấp chuột hoặc làm điều gì đó khác với nó. Sau khi hoàn tất, hãy chuyển đến bảng lệnh một lần nữa và chọn 'kích hoạt javascript'.