如何用JavaScript模拟点击?

你考虑过使用jQuery来避免所有的浏览器检测吗?使用jQuery，它将像下面这样简单:

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

[编辑2022]这个答案真的过时了。现代化。原始答案在底部。

将element.dispatchEvent与新创建的所需类型的Event一起使用。

下面是一个使用事件的代表团的例子。

Fork 这个stackblitz项目来玩它。

// Note: {bubbles: true} because of the event delegation ...
document.addEventListener(`click`, handle);
document.addEventListener(`virtualhover`, handle);


// the actual 'trigger' function
const trigger = (el, etype, custom) => {
const evt = custom ?? new Event( etype, { bubbles: true } );
el.dispatchEvent( evt );
};


// a custom event ;)
const vHover = new CustomEvent(`virtualhover`,
{ bubbles: true, detail: `red` });




setTimeout( _ =>
trigger( document.querySelector(`#testMe`), `click` ), 1000 );


function handle(evt) {
if (evt.target.id === `clickTrigger`) {
trigger(document.querySelector(`#testMe`), `click`);
}
  

if (evt.type === `virtualhover`) {
evt.target.style.color = evt.detail;
return setTimeout( _ => evt.target.style.color = ``, 1000 );
}
  

if (evt.target.id === `testMe`) {
document.querySelector(`#testMeResult`)
.insertAdjacentHTML(`beforeend`, `<p>One of us clicked #testMe.
It was <i>${evt.isTrusted ? `<b>you</b>` : `me`}</i>.</p>`);
trigger(
document.querySelector(`#testMeResult p:last-child`),
`virtualhover`,
vHover );
}
}

body {
font: 1.2rem/1.5rem verdana, arial;
margin: 2rem;
}


#testMe {
cursor: pointer;
}


p {
margin: 0.2rem 0;
}

<div id="testMe">
Test me can be clicked
</div>


<p><button id='clickTrigger'>Click #testMe</button></p>


<div id="testMeResult"></div>

老答案:

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

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);
}
}

上面的答案是最好的!然而，当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.
}
}
}

比如一些简单的东西怎么样:

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

支持甚至由IE。

使用jQuery可以节省大量空间。你只需要使用:

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

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
• < a href = " https://codepen。io / felquis /钢笔/ damDA noreferrer“rel = > https://codepen.io/felquis/pen/damDA < / >

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

按照这个链接了解鼠标事件使用Javascript和浏览器兼容性相同

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

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

这个例子将触发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

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

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

或

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

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)
}
}

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

• 我们必须使用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>

对我有效的解决方案.... 点击事件可以在点击按钮或从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>

老实说，这里的答案都不适合我的具体情况。Jquery是出了问题，所以所有这些答案都未经测试。我会说我从上面的@mnishiguchi的回答中建立了这个答案，但这是唯一一件实际上最终有效的事情。

// select the element by finding the id of mytest1
const el = document.querySelector('#mytest1');


// pass the element to the simulateClick function
simulateClick( el );


function simulateClick(element){
trigger( element, 'mousedown' );
trigger( element, 'click' );
trigger( element, 'mouseup' );


function trigger( elem, event ) {
elem.dispatchEvent( new MouseEvent( event ) );
}
}

如果事件没有被触发，请使用timeout

setTimeout(function(){ document.getElementById('your_id').click(); }, 200);

document.getElementById("btnHandler").click();