CSS ": hover"를 활성화하는 순수 JavaScript에서 마우스 오버를 어떻게 시뮬레이션합니까?

Question 1

mouseoverChrome 에서 시뮬레이션 할 코드를 찾으려고 했지만 "mouseover"리스너가 실행 되더라도 CSS "hover"선언이 설정되지 않았습니다!

나는 또한 시도했다 :

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

그러나 요소를 선언에 선언 된 것으로 변경하는 것은 없습니다 hover.

이것이 가능한가?

Question 2

당신은 할 수 없습니다. 신뢰할 수있는 이벤트 가 아닙니다 .

사용자 상호 작용의 결과 또는 DOM 변경의 직접적인 결과로 사용자 에이전트에 의해 생성 된 이벤트는 DocumentEvent.createEvent를 통해 스크립트에 의해 생성 된 이벤트에 부여되지 않는 권한을 가진 사용자 에이전트에 의해 신뢰됩니다. ( "Event") 메서드, Event.initEvent () 메서드를 사용하여 수정하거나 EventTarget.dispatchEvent () 메서드를 통해 전달합니다. 신뢰할 수있는 이벤트의 isTrusted 속성 값은 true이고 신뢰할 수없는 이벤트의 isTrusted 속성 값은 false입니다.

대부분의 신뢰할 수없는 이벤트는 click 또는 DOMActivate 이벤트를 제외하고 기본 작업을 트리거하지 않아야합니다.

클래스를 추가하고 mouseover / mouseout 이벤트에서 수동으로 추가 / 제거해야합니다.

Question 3

다음과 같이 mouseover 이벤트를 시뮬레이션 할 수 있습니다.

HTML

<div id="name">My Name</div>

자바 스크립트

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

Question 4

배경

나는 주어진 페이지의 특정 요소 세트가 호버 이벤트에 대한 CSS에 의해 설정된 일부 CSS 속성 세트를 가지고 있는지 확인하기 위해 자동화 된 테스트를 작성하려고 시도하는 동안이 질문을 발견했습니다.

위의 답변이 완벽하게 설명하지만 JS에 의해 hover 이벤트를 트리거 한 다음 관심있는 일부 css 값을 조사하는 것이 불가능한 이유는 "CSS를 활성화하는 순수 JavaScript에서 마우스 오버를 어떻게 시뮬레이션합니까?"라는 초기 질문에 대답합니다. : hover”? " 부분적으로 만.

부인 성명

이것은 성능이 뛰어난 솔루션이 아닙니다. 성능이 문제가되지 않는 자동화 된 테스트에만 사용합니다.

해결책

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

설명

generateEvent는 모든 css 파일을 읽고 : hover를 빈 문자열로 바꾸고 적용합니다. 모든 : hover 스타일이 적용되는 효과가 있습니다. 이제 시뮬레이션을 중지하여 Howered 스타일을 조사하고 초기 상태로 돌아갈 수 있습니다.

시트에서를 가져 와서 element.css (...)를 수행하여 관심있는 요소뿐만 아니라 전체 문서에 대해 호버 효과를 적용하는 이유는 무엇입니까?

이렇게하면 스타일이 인라인으로 적용되고 원래 CSS 호버 스타일에 의해 재정의되지 않을 수있는 다른 스타일이 재정의됩니다.

이제 단일 요소에 대한 호버링을 어떻게 시뮬레이션합니까?

이것은 성능이 좋지 않으므로하지 않는 것이 좋습니다. 필요한 경우 스타일이 요소에 적용되고 해당 스타일 만 사용하는지 element.is (selectorOfInterest)로 확인할 수 있습니다.

예

Jasmine에서 다음을 수행 할 수 있습니다.

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

Question 5

내가 보통이 경우 일은 같은 자바 스크립트를 사용하여 클래스를 추가 .. 및 연결이다 CSS는 AS를 :hover이 클래스에

사용해보십시오

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

또는 이전 브라우저의 경우 :

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

물론 onmouseout요소를 떠날 때 "hovered"클래스를 제거하려면 을 사용해야 합니다.

Question 6

CSS 의사 클래스를 요소에 적용 할 수있는 라이브러리 인 pseudo : styler를 사용할 수 있습니다 .

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

면책 조항 : 저는이 도서관의 공동 저자입니다. 특히 페이지의 CSS 규칙을 제어 할 수없는 Chrome 확장 프로그램에서 사용하기 위해 교차 출처 스타일 시트를 추가로 지원하도록 설계했습니다.

Question 7

DOM 조작 후 CSS를 검사하고 싶다고 가정하고 있지만 마우스를 devtools로 다시 이동하자마자 이벤트는 더 이상 해당 html 요소에서 활성화되지 않습니다. 자바 스크립트 이벤트를 위해 devtools에서 : hover 옵션과 같은 것을 원할 것입니다. 존재하지 않지만 시뮬레이션 할 수 있습니다.

devtools를 열고 클릭하여 활성화하십시오.
관심있는 요소에서 이벤트를 트리거합니다.
마우스를 움직이지 않고 ctrl + shift + p로 devtools 명령 패널을 열고 키보드로 '자바 스크립트 비활성화'를 선택합니다.

자바 스크립트가 비활성화 되었기 때문에 요소를 다시 수정할 기회가 없습니다. devtools로 이동하여 마치 마우스를 가리 키거나 클릭하거나 다른 작업을 수행하는 것처럼 CSS와 HTML을 검사 할 수 있습니다. 완료되면 명령 패널로 다시 이동하여 'JavaScript 활성화'를 선택하십시오.