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

JavaScript에서 마우스 클릭 이벤트 시뮬레이션

document.form.button.click() 메서드는 버튼 클릭을 트리거하는 일반적인 접근 방식이지만 다음과 같은 경우가 있을 수 있습니다. 실제 onclick 이벤트를 시뮬레이션하고 싶습니다.

없이 이벤트 시뮬레이션 Prototype.js

Prototype.js를 사용하지 않고 onclick 이벤트를 시뮬레이션하려면 다음 코드를 활용할 수 있습니다.

function simulate(element, eventName) {
  // Define options and event type
  const options = extend(defaultOptions, arguments[2] || {});
  let oEvent, eventType = null;

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

  // Ensure event type support
  if (!eventType) {
    throw new SyntaxError("Only HTMLEvents and MouseEvents interfaces are supported.");
  }

  // Create event using `document.createEvent`
  if (document.createEvent) {
    oEvent = document.createEvent(eventType);
    if (eventType === "HTMLEvents") {
      oEvent.initEvent(eventName, options.bubbles, options.cancelable);
    } else {
      oEvent.initMouseEvent(
        eventName,
        options.bubbles,
        options.cancelable,
        document.defaultView,
        options.button,
        options.pointerX,
        options.pointerY,
        options.pointerX,
        options.pointerY,
        options.ctrlKey,
        options.altKey,
        options.shiftKey,
        options.metaKey,
        options.button,
        element
      );
    }
    element.dispatchEvent(oEvent);
  } else {
    // Internet Explorer fallback
    options.clientX = options.pointerX;
    options.clientY = options.pointerY;
    const evt = document.createEventObject();
    oEvent = extend(evt, options);
    element.fireEvent("on" + eventName, oEvent);
  }

  return element;
}

시뮬레이션 기능 사용

이 기능을 사용하려면 , 요소와 이벤트 이름을 전달하기만 하면 됩니다.

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

추가 옵션을 지정하여 이벤트를 맞춤설정할 수도 있습니다. 예: 마우스 좌표:

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

이 접근 방식은 JavaScript에서 마우스 클릭 이벤트 시뮬레이션에 대한 더 큰 유연성과 제어 기능을 제공합니다.

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