如何使用可自定义选项在 JavaScript 中模拟鼠标点击？-js教程-PHP中文网

如何使用可自定义选项在 JavaScript 中模拟鼠标点击？

Barbara Streisand

发布： 2024-12-03 18:42:11

原创

1064 人浏览过

How Can I Simulate Mouse Clicks in JavaScript with Customizable Options?

使用 JavaScript 模拟鼠标点击：综合指南

要使用 JavaScript 模拟鼠标点击事件，一种常见的方法是 document.form。按钮.单击()。此方法允许您直接触发表单按钮上的点击行为。

但是，如果您希望更精确地模拟 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);
}

登录后复制

此代码创建一个新的鼠标事件，初始化其属性，然后将其分派到指定的元素上。

可自定义事件模拟

为了获得更大的灵活性，请考虑使用以下函数：

function simulate(element, eventName, options)
{
    // Set default options
    var defaultOptions = {
        pointerX: 0,
        pointerY: 0,
        button: 0,
        ctrlKey: false,
        altKey: false,
        shiftKey: false,
        metaKey: false,
        bubbles: true,
        cancelable: true
    };

    // Extend default options with provided options
    for (var property in options)
      defaultOptions[property] = options[property];

    // Determine event type
    var eventType = null;
    for (var name in eventMatchers)
    {
        if (eventMatchers[name].test(eventName)) { 
            eventType = name; 
            break; 
        }
    }

    // Create and initialize event
    var oEvent;
    if (document.createEvent)
    {
        if (eventType == 'HTMLEvents')
        {
            oEvent = document.createEvent(eventType);
            oEvent.initEvent(eventName, defaultOptions.bubbles, defaultOptions.cancelable);
        }
        else
        {
            oEvent = document.createEvent(eventType);
            oEvent.initMouseEvent(eventName, defaultOptions.bubbles, defaultOptions.cancelable, document.defaultView,
            defaultOptions.button, defaultOptions.pointerX, defaultOptions.pointerY, defaultOptions.pointerX, defaultOptions.pointerY,
            defaultOptions.ctrlKey, defaultOptions.altKey, defaultOptions.shiftKey, defaultOptions.metaKey, defaultOptions.button, element);
        }
        element.dispatchEvent(oEvent);
    }
    else
    {
        // Legacy IE fallback
        defaultOptions.clientX = defaultOptions.pointerX;
        defaultOptions.clientY = defaultOptions.pointerY;
        oEvent = document.createEventObject();
        oEvent = extend(oEvent, defaultOptions);
        element.fireEvent('on' + eventName, oEvent);
    }

    return element;
}

登录后复制

此函数允许您为模拟事件指定自定义选项，包括鼠标坐标、按下的按钮和修饰键。

用法

要使用该功能，只需提供目标元素、事件名称和任何所需的选项：

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

登录后复制

这将使用自定义鼠标坐标模拟“btn”元素上的单击事件。

以上是如何使用可自定义选项在 JavaScript 中模拟鼠标点击？的详细内容。更多信息请关注PHP中文网其他相关文章！