如何使用 JavaScript 模拟点击？

Question

我只是想知道如何使用 JavaScript 来模拟对元素的点击。

目前我有：

function simulateClick(control) {
  if (document.all) {
    control.click();
  } else {
    var evObj = document.createEvent('MouseEvents');
    evObj.initMouseEvent('click', true, true, window, 1, 12, 345, 7, 220, false, false, true, false, 0, null );
    control.dispatchEvent(evObj);
  }
}

<a href="http://www.google.com" id="mytest1">test 1</a><br>

<script type="text/javascript">
    simulateClick(document.getElementById('mytest1'));
</script>

但它不起作用:(

有什么想法吗？

Answer 1

您是否考虑过使用 jQuery 来避免所有浏览器检测？使用 jQuery，它会很简单：

$("#mytest1").click();

Answer 2

这是我做的。这很简单，但很有效：

function eventFire(el, etype){
  if (el.fireEvent) {
    el.fireEvent('on' + etype);
  } else {
    var evObj = document.createEvent('Events');
    evObj.initEvent(etype, true, false);
    el.dispatchEvent(evObj);
  }
}

用法：

eventFire(document.getElementById('mytest1'), 'click');

Answer 3

最佳答案是最好的！但是，当 etype = 'click' 时，它并没有在 Firefox 中为我触发鼠标事件。

所以，我将 document.createEvent 更改为 'MouseEvents' 并解决了问题。额外的代码用于测试是否有其他代码干扰了事件，如果它被取消，我会将其记录到控制台。

function eventFire(el, etype){
  if (el.fireEvent) {
    el.fireEvent('on' + etype);
  } else {
    var evObj = document.createEvent('MouseEvents');
    evObj.initEvent(etype, true, false);
    var canceled = !el.dispatchEvent(evObj);
    if (canceled) {
      // A handler called preventDefault.
      console.log("automatic click canceled");
    } else {
      // None of the handlers called preventDefault.
    } 
  }
}

Answer 4

那么简单的事情呢：

document.getElementById('elementID').click();

Supported 甚至是 IE。

Answer 5

您可以使用 jQuery 为自己节省大量空间。你只需要使用：

$('#myElement').trigger("click")

Answer 6

var elem = document.getElementById('mytest1');

// Simulate clicking on the specified element.
triggerEvent( elem, 'click' );

/**
 * Trigger the specified event on the specified element.
 * @param  {Object} elem  the target element.
 * @param  {String} event the type of the event (e.g. 'click').
 */
function triggerEvent( elem, event ) {
  var clickEvent = new Event( event ); // Create the event.
  elem.dispatchEvent( clickEvent );    // Dispatch the event.
}

参考

• https://developer.mozilla.org/en-US/docs/Web/Guide/Events/Creating_and_triggering_events
• https://codepen.io/felquis/pen/damDA

Answer 7

document.getElementById('elementId').dispatchEvent(new MouseEvent("click",{bubbles: true, cancellable: true}));

点击此链接了解使用 Javascript 和浏览器兼容性的鼠标事件

https://developer.mozilla.org/en-US/docs/Web/API/MouseEvent#Browser_compatibility

Answer 8

这没有很好的记录，但我们可以非常简单地触发任何类型的事件。

本例会触发50次双击按钮：

let theclick = new Event("dblclick")

for (let i = 0;i < 50;i++){
  action.dispatchEvent(theclick) 
}

<button id="action" ondblclick="out.innerHTML+='Wtf '">TEST</button>
<div id="out"></div>

Event 接口表示发生在 DOM 中的事件。

用户操作可以触发事件，例如点击鼠标 按钮或敲击键盘，或由 API 生成以表示 异步任务的进度。也可以触发 以编程方式，例如通过调用 HTMLElement.click() 方法 一个元素，或通过定义事件，然后将其发送到指定的 使用 EventTarget.dispatchEvent() 定位目标。

https://developer.mozilla.org/en-US/docs/Web/API/Event

https://developer.mozilla.org/en-US/docs/Web/API/Event/Event

Answer 9

document.getElementById("element").click()

只需从 DOM 中选择元素。节点有点击函数，可以调用。

或者

document.querySelector("#element").click()

Answer 10

const Discord = require("discord.js");
const superagent = require("superagent");

module.exports = {
    name: "hug",
    category: "action",
    description: "hug a user!",
    usage: "hug <user>",
    run: async (client, message, args) => {
    let hugUser = message.mentions.users.first() 
    if(!hugUser) return message.channel.send("You forgot to mention somebody.");
    let hugEmbed2 = new Discord.MessageEmbed()
    .setColor("#36393F")
    .setDescription(`**${message.author.username}** hugged **himself**`)
    .setImage("https://i.kym-cdn.com/photos/images/original/000/859/605/3e7.gif")
     .setFooter(`© Yuki V5.3.1`, "https://cdn.discordapp.com/avatars/489219428358160385/19ad8d8c2fefd03fa0e1a2e49a2915c4.png")
  if (hugUser.id === message.author.id) return message.channel.send(hugEmbed2);
    const {body} = await superagent
    .get(`https://nekos.life/api/v2/img/hug`);

    let hugEmbed = new Discord.MessageEmbed()
    .setDescription(`**${message.author.username}** hugged **${message.mentions.users.first().username}**`)
    .setImage(body.url)
    .setColor("#36393F")
     .setFooter(`© Yuki V5.3.1`, "https://cdn.discordapp.com/avatars/489219428358160385/19ad8d8c2fefd03fa0e1a2e49a2915c4.png")
    message.channel.send(hugEmbed)
}
}

Answer 11

模拟事件类似于创建自定义事件。模拟鼠标事件

• 我们必须使用document.createEvent() 创建MouseEvent。
• 然后使用initMouseEvent()，我们必须设置将要发生的鼠标事件。
• 然后在您要模拟事件的元素上分派鼠标事件。

在下面的代码中，我使用了setTimeout，以便在 1 秒后自动点击按钮。

const div = document.querySelector('div');

div.addEventListener('click', function(e) {
  console.log('Simulated click');
});

const simulatedDivClick = document.createEvent('MouseEvents');

simulatedDivClick.initEvent(
  'click', /* Event type */
  true, /* bubbles */
  true, /* cancelable */
  document.defaultView, /* view */
  0, /* detail */
  0, /* screenx */
  0, /* screeny */
  0, /* clientx */
  0, /* clienty */
  false, /* ctrlKey */
  false, /* altKey */
  false, /* shiftKey */
  0, /* metaKey */
  null, /* button */
  null /* relatedTarget */
);

// Automatically click after 1 second
setTimeout(function() {
  div.dispatchEvent(simulatedDivClick);
}, 1000);

<div> Automatically click </div>

Answer 12

对我有用的解决方案.... 单击按钮可以调用单击事件，也可以从 JavaScript 文件中调用。 在此代码中，要么单击按钮以显示警报，要么在某些条件下或无条件下简单地调用它

    function ss(){
    alert('dddddddddddddddddddddddd');
    }
    var mybtn=document.getElementById('btn');
    mybtn.click();

    <!DOCTYPE html>
    <html>
    <head>
    <title>Page Title</title>
    </head>
    <body>
    
    <h1>This is a Heading</h1>
    <p>This is a paragraph.</p>
    <button id="btn" onclick="ss()">click to see </button>
    </body>
    </html>