我只是想知道如何使用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>
但它并没有起作用:(
什么好主意吗?
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)
}
}
上面的答案是最好的!然而，当etype = 'click'时，它并没有为我在Firefox中触发鼠标事件。
所以，我修改了文档。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.
}
}
}
[编辑2022]这个答案真的过时了。现代化。原始答案在底部。
使用元素。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>
老答案是:
这是我做的。这很简单，但很有效:
函数eventFire(el, etype){
if (el.fireEvent) {
埃尔。fireEvent('on' + etype);
}其他{
var evObj = document.createEvent('Events');
evObj。initEvent(etype, true, false);
el.dispatchEvent (evObj);
｝
｝
这没有很好的记录，但我们可以非常简单地触发任何类型的事件。
这个例子将触发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>
The Event interface represents an event which takes place in the DOM.
An event can be triggered by the user action e.g. clicking the mouse
button or tapping keyboard, or generated by APIs to represent the
progress of an asynchronous task. It can also be triggered
programmatically, such as by calling the HTMLElement.click() method of
an element, or by defining the event, then sending it to a specified
target using EventTarget.dispatchEvent().
https://developer.mozilla.org/en-US/docs/Web/API/Event
https://developer.mozilla.org/en-US/docs/Web/API/Event/Event
