JavaScript에서 마우스 클릭 및 Onclick 이벤트를 어떻게 시뮬레이션할 수 있습니까?

JavaScript로 마우스 클릭 모방

JavaScript에서 document.form.button.click() 기술은 버튼 클릭 시뮬레이션으로 잘 알려져 있습니다. 그러나 onclick 이벤트를 시뮬레이션하려면 다른 접근 방식이 필요합니다. 이 기사에서는 포괄적인 코드 솔루션을 통해 이를 달성하는 방법을 살펴봅니다.

'onclick' 이벤트 시뮬레이션

제공된 코드 조각인 contextMenuClick()은 MouseEvent 객체를 초기화하고 이를 원하는 이벤트로 전달합니다. 요소. 이는 onclick 이벤트를 효과적으로 트리거합니다.

function contextMenuClick() {
  var element = 'button';
  var evt = element.ownerDocument.createEvent('MouseEvents');

  evt.initMouseEvent('contextmenu', true, true, element.ownerDocument.defaultView,
                     1, 0, 0, 0, 0, false, false, false, false, 1, null);

  element.dispatchEvent(evt);
}

일반 마우스 이벤트 시뮬레이션

시뮬레이트라는 일반화된 함수를 도입하면 contextMenuClick과 같은 특정 기능이 필요하지 않습니다. 모든 요소에 대해 HTMLEvents와 MouseEvents를 모두 시뮬레이션할 수 있습니다.

function simulate(element, eventName, options) {
  var eventType;

  for (var name in eventMatchers) {
    if (eventMatchers[name].test(eventName)) {
      eventType = name;
      break;
    }
  }

  ... // Function implementation continues

  return element;
}

이 함수는 요소, eventName 및 옵션이라는 세 가지 매개 변수를 허용합니다. 기본 옵션이 제공되지만 사용자 정의 옵션 객체를 전달하여 재정의할 수 있습니다.

사용

시뮬레이트를 사용하여 마우스 클릭 이벤트를 트리거하려면:

simulate(document.getElementById("btn"), "click");

사용자 정의

옵션 개체를 사용하면 마우스 좌표, 수정자(Ctrl, Alt, Shift, Meta), 및 이벤트 동작(거품, 취소 가능). 예:

simulate(document.getElementById("btn"), "click", { pointerX: 123, pointerY: 321 });

위 내용은 JavaScript에서 마우스 클릭 및 Onclick 이벤트를 어떻게 시뮬레이션할 수 있습니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!