CSS ":hover"를 활성화하는 순수 자바스크립트에서 마우스 오버를 시뮬레이션하려면 어떻게 해야 합니까?

CSS ":hover"를 활성화하는 순수 자바스크립트에서 마우스 오버를 시뮬레이션하려면 어떻게 해야 합니까?

시뮬레이션할 코드를 찾고 있었어요mouseoverChrome에서는 "마우스 오버" 청취자가 해고되더라도 CSS "호버" 선언은 설정되지 않습니다!

저는 또한 다음을 시도했습니다.

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

하지만 그 어떤 것도 그 요소를 그것에 선언된 것으로 바꾸지 않는 것처럼 보입니다.hover선언.

이것이 가능합니까?

그럴수는 없어요.신뢰할 수 있는 이벤트가 아닙니다.

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

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

클래스를 추가하고 마우스 오버/마우스 아웃 이벤트에서 클래스를 수동으로 추가/제거해야 합니다.

다음과 같은 마우스 오버 이벤트를 시뮬레이션할 수 있습니다.

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

배경

저는 자동 테스트를 작성하고, 주어진 페이지의 특정 요소 집합이 모두 수신되는 것을 확인하기 위해, 호버 이벤트에 대해 CSS에 의해 설정된 일부 CSS 속성 집합을 가지고 있는지 확인하려고 시도하는 동안 이 질문을 우연히 발견했습니다.

위의 답변은 JS에 의해 단순히 호버 이벤트를 트리거한 다음 관심 있는 CSS 값을 조사하는 것이 왜 불가능한지 완벽하게 설명하지만, "CSS ":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를 빈 문자열로 대체하여 적용합니다.이는 모든 :호버 스타일이 적용되는 효과가 있습니다.이제 샤워 스타일을 탐색하고 시뮬레이션을 중지하여 초기 상태로 되돌릴 수 있습니다.

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

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

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

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

예

자스민에서 다음을 수행할 수 있습니다.

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

이 경우 제가 주로 하는 일은 자바스크립트를 사용하여 클래스를 추가하는 것입니다.그리고 그것을 첨부합니다.CSS▁the로서:hover 반까지

사용해 보십시오.

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

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

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

당신은 당연히 사용해야 할 것입니다.onmouseout요소를 떠날 때 "호핑된" 클래스를 제거하려면...

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 확장에서 사용하기 위해 교차 오리진 스타일시트를 추가로 지원하도록 설계했습니다.

돔 조작 후에 CSS를 검사하고 싶으실 거라고 생각합니다만, 마우스를 다시 devtools로 이동하는 순간, 이벤트가 해당 html 요소에서 더 이상 활성화되지 않습니다.당신은 아마도 자바스크립트 이벤트를 위해 devtools의 :hover 옵션과 같은 것을 갖고 싶을 것입니다.그것은 존재하지 않지만, 당신은 그것을 시뮬레이션할 수 있습니다.

1. 개발 도구를 열고 해당 도구를 클릭하여 활성화합니다.
2. 관심 있는 요소에서 이벤트를 트리거합니다.
3. 마우스를 움직이지 않고 ctrl + shift + p로 devtools 명령 패널을 열고 키보드로 'javascript 사용 안 함'을 선택합니다.

Javascript가 비활성화되어 있으므로 요소를 다시 수정할 수 없습니다.당신은 devtools에 가서 CSS와 html을 마치 그것으로 맴돌거나 클릭하거나 다른 것을 하는 것처럼 검사할 수 있습니다.완료 후 명령 패널로 다시 이동하여 'javascript 활성화'를 선택합니다.

나는 CSS만을 사용하는 이 질문에 대한 다른 접근법을 언급하고 싶지만, 나는 여기서 그것을 가정하고 있습니다.:hover다음과 같이 상위 태그 중 하나가 변경된 경우에 트리거됩니다.

  function btn_activated(){
      const button = document.querySelector('button.btn');
      if(button.classList.contains('active')){
          button.classList.remove('active');
      }else{
           button.classList.add('active');
      }
  }

    .btn{
        width: 100px;
        height: 30px;
    }
    .btn:hover > span.visually-hidden,
    .active> span.visually-hidden{
        display: inline;
    }
    .visually-hidden{
        display: none;
    }

<button class="btn" onClick="btn_activated()">
    <span class="visually-hidden">
       hovered
    </span>
</button>

이 개념을 중첩된 태그에 적용할 수 있지만 상위 태그 중 하나의 classList가 적어도 변경되어야 합니다.

언급URL : https://stackoverflow.com/questions/17226676/how-do-i-simulate-a-mouseover-in-pure-javascript-that-activates-the-css-hover