在 Tampermonkey 中模拟 mousedown、click、mouseup 序列？答案

【问题标题】：Simulating a mousedown, click, mouseup sequence in Tampermonkey?在 Tampermonkey 中模拟 mousedown、click、mouseup 序列？
【发布时间】：2014-07-24 09:05:49
【问题描述】：

我想模拟整个点击，而不仅仅是

document.getElementsByClassName()[0].click();

我该怎么做？搜索结果似乎都是关于处理此类事件，而不是触发它们。

【问题讨论】：

你可以使用 document.createEvent("MouseEvents") 来模拟点击。
我以为这只适用于滚轮之类的东西
developer.mozilla.org/en-US/docs/Web/API/…
我不明白它是如何在没有 mousedown 或 mouseup 的情况下模拟整个鼠标点击 =/ 我不知道我尝试做的事情是否毫无意义或者我只是以错误的方式去做，基本上我有一个按钮仅适用于 mouseup。
哇！！！ Mozilla 开发网站为我做了这件事。对我来说关键是：var simMousedownEvent = new MouseEvent('mousedown', { 'view': window, 'bubbles': true, 'cancelable': true }); $(“input.myelement”)[0].dispatchEvent(simMousedownEvent) [0] 是从 jQuery 对象转换为本机 JS DOM 对象所必需的。

标签： javascript mouseevent greasemonkey userscripts tampermonkey

【解决方案1】：

发送鼠标事件。像这样：

//--- Get the first link that has "stackoverflow" in its URL.
var targetNode = document.querySelector ("a[href*='stackoverflow']");
if (targetNode) {
    //--- Simulate a natural mouse-click sequence.
    triggerMouseEvent (targetNode, "mouseover");
    triggerMouseEvent (targetNode, "mousedown");
    triggerMouseEvent (targetNode, "mouseup");
    triggerMouseEvent (targetNode, "click");
}
else
    console.log ("*** Target node not found!");

function triggerMouseEvent (node, eventType) {
    var clickEvent = document.createEvent ('MouseEvents');
    clickEvent.initEvent (eventType, true, true);
    node.dispatchEvent (clickEvent);
}

如果网页是静态加载的，这将有效。如果网页是 AJAX 驱动的，请使用如下技术：

当心：
问题代码有错误。您需要将类名传递给该函数。像这样：

document.getElementsByClassName ("SomeClassName")[0].click();

【讨论】：

您在本机事件触发的顺序中不正确。 Click 事件在 mouseup 之后触发。在双击的情况下，顺序是：mousedown、mouseup、click、mousedown、mouseup、click、dblclick。请注意，在依赖点击事件时，没有内置机制来区分单击和双击。我建议编辑您的答案。我希望你对此感到安慰。
据我所知，这种行为并不是很新。向上/向下是立即触发的基本事件，当其他条件匹配时，将组合 click 或 drag。 mouseup 在最新的 mousedown 事件所针对的同一元素内被视为单击，同样地，mousemove 超过距离阈值而按钮被保持为拖动（当可拖动时），类似 select。由于 mouseup 是一个铁定事实，而 click 随后可以解释，所以这个顺序也应该是可以预料的。
即使其他方法失败，您的代码也能完美运行！但是请您添加一些代码来模拟 Shift 点击吗？
@jsv，请参阅 here 和 here，或在需要时打开一个新问题。任何新问题都应该有一个 MCVE 或指向目标页面的链接，因为方法可能因页面和您的最终目标而异。
@BrockAdams，所以我把它贴在了here。希望不要太啰嗦！

【解决方案2】：

在 Brock's code 按预期工作后，我改进了一点。

定义：

function simulateMouseClick(targetNode) {
    function triggerMouseEvent(targetNode, eventType) {
        var clickEvent = document.createEvent('MouseEvents');
        clickEvent.initEvent(eventType, true, true);
        targetNode.dispatchEvent(clickEvent);
    }
    ["mouseover", "mousedown", "mouseup", "click"].forEach(function(eventType) { 
        triggerMouseEvent(targetNode, eventType);
    });
}

调用示例：

simulateMouseClick(document);

simulateMouseClick(document.querySelector("a[href*='stackoverflow']"));

【讨论】：

【解决方案3】：

位优化

function fireMouseEvents( query, eventNames ){
    var element = document.querySelector(query);
    if(element && eventNames && eventNames.length){
        for(var index in eventNames){
            var eventName = eventNames[index];
            if(element.fireEvent ){
                element.fireEvent( 'on' + eventName );     
            } else {   
                var eventObject = document.createEvent( 'MouseEvents' );
                eventObject.initEvent( eventName, true, false );
                element.dispatchEvent(eventObject);
            }
        }
    }
}

你会这样开火

fireMouseEvents("a[href*='stackoverflow']",['mouseover','mousedown','mouseup','click']);

【讨论】：