entityMap|blocks|key|3qaku|text|这是我做的。这很简单，但它是有效的：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|6unkk|function+eventFire(el,+etype){
++if+(el.fireEvent)+{
++++el.fireEvent('on'+%2B+etype);
++}+else+{
++++var+evObj+=+document.createEvent('Events');
++++evObj.initEvent(etype,+true,+false);
++++el.dispatchEvent(evObj);
++}
}|code-block|syntax|javascript|9tenm|用法：|7h4nt|eventFire(document.getElementById('mytest1'),+'click');^0|0|0|0^^$0|$]|1|@$2|3|4|5|6|7|8|L|9|@]|A|@]|B|$]]|$2|C|4|D|6|E|8|M|9|@]|A|@]|B|$F|G]]|$2|H|4|I|6|7|8|N|9|@]|A|@]|B|$]]|$2|J|4|K|6|E|8|O|9|@]|A|@]|B|$F|G]]]]

Here's what I cooked up. It's pretty simple, but it works:

<pre><code>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);
 }
}
</code></pre>

Usage:

<pre><code>eventFire(document.getElementById('mytest1'), 'click');
</code></pre>

entityMap|blocks|key|5t2pd|text|一些简单的东西怎么样，比如：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|5knv8|document.getElementById('elementID').click();|code-block|syntax|javascript|as8ms|支持|93g94|即使是IE。^0|0|0|0^^$0|$]|1|@$2|3|4|5|6|7|8|L|9|@]|A|@]|B|$]]|$2|C|4|D|6|E|8|M|9|@]|A|@]|B|$F|G]]|$2|H|4|I|6|7|8|N|9|@]|A|@]|B|$]]|$2|J|4|K|6|7|8|O|9|@]|A|@]|B|$]]]]

What about something simple like:

<pre><code>document.getElementById('elementID').click();
</code></pre>

<a href="https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/click">Supported</a> even by IE.

entityMap|blocks|key|619s|text|您是否考虑过使用jQuery来避免所有的浏览器检测？有了jQuery，它就会像下面这样简单：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|2glh3|$("#mytest1").click();|code-block|syntax|javascript^0|0^^$0|$]|1|@$2|3|4|5|6|7|8|H|9|@]|A|@]|B|$]]|$2|C|4|D|6|E|8|I|9|@]|A|@]|B|$F|G]]]]

Have you considered using jQuery to avoid all the browser detection? With jQuery, it would be as simple as:

<pre><code>$("#mytest1").click();
</code></pre>

entityMap|blocks|key|2nfmv|text|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.
}|type|code-block|depth|inlineStyleRanges|entityRanges|data|syntax|javascript|fm36i|参考文献|unstyled|1vomt|https://developer.mozilla.org/en-US/docs/Web/Guide/Events/Creating|1usrc|_|9oi17|和|bs34g|f5ck8|触发|f2jf6|7kvns|事件|70ged|https://codepen.io/felquis/pen/damDA^0|0|0|0|0|0|0|0|0|0^^$0|$]|1|@$2|3|4|5|6|7|8|V|9|@]|A|@]|B|$C|D]]|$2|E|4|F|6|G|8|W|9|@]|A|@]|B|$]]|$2|H|4|I|6|G|8|X|9|@]|A|@]|B|$]]|$2|J|4|K|6|G|8|Y|9|@]|A|@]|B|$]]|$2|L|4|M|6|G|8|Z|9|@]|A|@]|B|$]]|$2|N|4|K|6|G|8|10|9|@]|A|@]|B|$]]|$2|O|4|P|6|G|8|11|9|@]|A|@]|B|$]]|$2|Q|4|K|6|G|8|12|9|@]|A|@]|B|$]]|$2|R|4|S|6|G|8|13|9|@]|A|@]|B|$]]|$2|T|4|U|6|G|8|14|9|@]|A|@]|B|$]]]]

<pre><code>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.
}
</code></pre>

<h2>Reference</h2>

<ul>
<li><a href="https://developer.mozilla.org/en-US/docs/Web/Guide/Events/Creating_and_triggering_events" rel="noreferrer">https://developer.mozilla.org/en-US/docs/Web/Guide/Events/Creating_and_triggering_events</a></li>
<li><a href="https://codepen.io/felquis/pen/damDA" rel="noreferrer">https://codepen.io/felquis/pen/damDA</a></li>
</ul>

entityMap|blocks|key|brfe|text|使用jQuery可以节省大量的空间。您只需要使用：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|5mvb1|$('#myElement').trigger("click")|code-block|syntax|javascript^0|0^^$0|$]|1|@$2|3|4|5|6|7|8|H|9|@]|A|@]|B|$]]|$2|C|4|D|6|E|8|I|9|@]|A|@]|B|$F|G]]]]

You could save yourself a bunch of space by using jQuery. You only need to use:

<pre><code>$('#myElement').trigger("click")
</code></pre>

entityMap|blocks|key|epb9u|text|最上面的答案是最好的！但是，当我在Firefox中执行以下操作时，它并没有为我触发鼠标事件|type|unstyled|depth|inlineStyleRanges|entityRanges|data|lho9|..。|70p9v|因此，我更改了|3sjr|至|4o45q|这就解决了这个问题。额外的代码是测试是否有其他代码干扰了事件，如果事件被取消，我会将其记录到控制台。|43sh8|function+eventFire(el,+etype){
++if+(el.fireEvent)+{
++++el.fireEvent('on'+%2B+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.
++++}+
++}
}|code-block|syntax|javascript^0|0|0|0|0|0^^$0|$]|1|@$2|3|4|5|6|7|8|P|9|@]|A|@]|B|$]]|$2|C|4|D|6|7|8|Q|9|@]|A|@]|B|$]]|$2|E|4|F|6|7|8|R|9|@]|A|@]|B|$]]|$2|G|4|H|6|7|8|S|9|@]|A|@]|B|$]]|$2|I|4|J|6|7|8|T|9|@]|A|@]|B|$]]|$2|K|4|L|6|M|8|U|9|@]|A|@]|B|$N|O]]]]

The top answer is the best! However, it was not triggering mouse events for me in Firefox when <code>etype = 'click'</code>.

So, I changed the <code>document.createEvent</code> to <code>'MouseEvents'</code> and that fixed the problem. The extra code is to test whether or not another bit of code was interfering with the event, and if it was cancelled I would log that to console.

<pre><code>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.
 } 
 }
}
</code></pre>

entityMap|blocks|key|3bb0a|text|模拟事件类似于创建自定义事件。模拟鼠标事件|type|unstyled|depth|inlineStyleRanges|entityRanges|data|dhh97|我们将不得不创建|5p2jk|使用|5lksb|..。|36l29|然后使用|de7c|，我们必须设置将要发生的鼠标事件。|7h65a|然后在要模拟事件的元素上调度鼠标事件。|1qdbm|在下面的代码中，我使用了|6cpdd|这样按钮就会在1秒后自动点击。|btb6r|​|34avc|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);|code-block|syntax|javascript|cbi94|Automatically+click|ach6k^0|0|0|0|0|0|0|0|0|0|0|0|0^^$0|$]|1|@$2|3|4|5|6|7|8|12|9|@]|A|@]|B|$]]|$2|C|4|D|6|7|8|13|9|@]|A|@]|B|$]]|$2|E|4|F|6|7|8|14|9|@]|A|@]|B|$]]|$2|G|4|H|6|7|8|15|9|@]|A|@]|B|$]]|$2|I|4|J|6|7|8|16|9|@]|A|@]|B|$]]|$2|K|4|L|6|7|8|17|9|@]|A|@]|B|$]]|$2|M|4|N|6|7|8|18|9|@]|A|@]|B|$]]|$2|O|4|P|6|7|8|19|9|@]|A|@]|B|$]]|$2|Q|4|R|6|7|8|1A|9|@]|A|@]|B|$]]|$2|S|4|T|6|7|8|1B|9|@]|A|@]|B|$]]|$2|U|4|V|6|W|8|1C|9|@]|A|@]|B|$X|Y]]|$2|Z|4|10|6|W|8|1D|9|@]|A|@]|B|$X|Y]]|$2|11|4|T|6|7|8|1E|9|@]|A|@]|B|$]]]]

Simulating an event is similar to creating a custom event. To simulate a mouse event
<ul>
<li>we gonna have to create <code>MouseEvent</code> using <code>document.createEvent()</code>.</li>
<li>Then using <code>initMouseEvent()</code>, we've to set up the mouse event that is going to occur.</li>
<li>Then dispatched the mouse event on the element on which you'd like to simulate an event.</li>
</ul>
In the following code, I've used <code>setTimeout</code> so that the button gets clicked automatically after 1 second.
<div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-js lang-js prettyprint-override"><code>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);</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div&gt; Automatically click &lt;/div&gt;</code></pre>
</div>
</div>

entityMap|blocks|key|cth05|text|document.getElementById('elementId').dispatchEvent(new+MouseEvent("click",{bubbles:+true,+cancellable:+true}));|type|code-block|depth|inlineStyleRanges|entityRanges|data|syntax|javascript|bj90k|点击此链接，了解使用Javascript的鼠标事件及其浏览器兼容性|unstyled|auc8v|https://developer.mozilla.org/en-US/docs/Web/API/MouseEvent#Browser|5ijas|_|edllv|兼容性^0|0|0|0|0^^$0|$]|1|@$2|3|4|5|6|7|8|N|9|@]|A|@]|B|$C|D]]|$2|E|4|F|6|G|8|O|9|@]|A|@]|B|$]]|$2|H|4|I|6|G|8|P|9|@]|A|@]|B|$]]|$2|J|4|K|6|G|8|Q|9|@]|A|@]|B|$]]|$2|L|4|M|6|G|8|R|9|@]|A|@]|B|$]]]]

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

Follow this link to know about the mouse events using Javascript and browser compatibility for the same

<a href="https://developer.mozilla.org/en-US/docs/Web/API/MouseEvent#Browser_compatibility" rel="nofollow noreferrer">https://developer.mozilla.org/en-US/docs/Web/API/MouseEvent#Browser_compatibility</a>

entityMap|blocks|key|bnbuf|text|这并没有很好的文档记录，但我们可以非常简单地触发任何类型的事件。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|9bcmh|此示例将触发双击该按钮50次：|f0tjg|​|53hhr|let+theclick+=+new+Event("dblclick")

for+(let+i+=+0;i+<+50;i%2B%2B){
++action.dispatchEvent(theclick)+
}|code-block|syntax|javascript|72r7a|TEST|ejuas|10mbd|5hltf|Event接口表示在DOM中发生的事件。|be44h|86fo8|5meqk|事件可以由用户操作触发，例如单击鼠标按钮或轻敲键盘，也可以由API生成以表示异步任务的进度。它也可以通过编程方式触发，例如通过调用元素的HTMLElement.click()方法，|4ni6p|b98c8|或者定义事件，然后使用EventTarget.dispatchEvent()将其发送到指定的目标。|afv4s|fuqsg|6bhld|https://developer.mozilla.org/en-US/docs/Web/API/Event|68ga0|95b6l|7vt13|https://developer.mozilla.org/en-US/docs/Web/API/Event/Event^0|0|0|0|0|0|0|0|0|0|0|0|0|0|0|0|0|0|0^^$0|$]|1|@$2|3|4|5|6|7|8|16|9|@]|A|@]|B|$]]|$2|C|4|D|6|7|8|17|9|@]|A|@]|B|$]]|$2|E|4|F|6|7|8|18|9|@]|A|@]|B|$]]|$2|G|4|H|6|I|8|19|9|@]|A|@]|B|$J|K]]|$2|L|4|M|6|I|8|1A|9|@]|A|@]|B|$J|K]]|$2|N|4|F|6|7|8|1B|9|@]|A|@]|B|$]]|$2|O|4|-4|6|7|8|1C|9|@]|A|@]|B|$]]|$2|P|4|Q|6|7|8|1D|9|@]|A|@]|B|$]]|$2|R|4|-4|6|7|8|1E|9|@]|A|@]|B|$]]|$2|S|4|-4|6|7|8|1F|9|@]|A|@]|B|$]]|$2|T|4|U|6|7|8|1G|9|@]|A|@]|B|$]]|$2|V|4|-4|6|7|8|1H|9|@]|A|@]|B|$]]|$2|W|4|X|6|7|8|1I|9|@]|A|@]|B|$]]|$2|Y|4|-4|6|7|8|1J|9|@]|A|@]|B|$]]|$2|Z|4|-4|6|7|8|1K|9|@]|A|@]|B|$]]|$2|10|4|11|6|7|8|1L|9|@]|A|@]|B|$]]|$2|12|4|-4|6|7|8|1M|9|@]|A|@]|B|$]]|$2|13|4|-4|6|7|8|1N|9|@]|A|@]|B|$]]|$2|14|4|15|6|7|8|1O|9|@]|A|@]|B|$]]]]

This isn't very well documented, but we can trigger any kinds of events very simply.
This example will trigger 50 double click on the button:
<div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-js lang-js prettyprint-override"><code>let theclick = new Event("dblclick")

for (let i = 0;i &lt; 50;i++){
 action.dispatchEvent(theclick) 
}</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;button id="action" ondblclick="out.innerHTML+='Wtf '"&gt;TEST&lt;/button&gt;
&lt;div id="out"&gt;&lt;/div&gt;</code></pre>
</div>
</div>

<blockquote>
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().
<a href="https://developer.mozilla.org/en-US/docs/Web/API/Event" rel="nofollow noreferrer">https://developer.mozilla.org/en-US/docs/Web/API/Event</a>
</blockquote>
<a href="https://developer.mozilla.org/en-US/docs/Web/API/Event/Event" rel="nofollow noreferrer">https://developer.mozilla.org/en-US/docs/Web/API/Event/Event</a>

entityMap|blocks|key|3bb3u|text|const+Discord+=+require("discord.js");
const+superagent+=+require("superagent");

module.exports+=+{
++++name:+"hug",
++++category:+"action",
++++description:+"hug+a+user!",
++++usage:+"hug+",
++++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)
}
}|type|code-block|depth|inlineStyleRanges|entityRanges|data|syntax|javascript^0^^$0|$]|1|@$2|3|4|5|6|7|8|E|9|@]|A|@]|B|$C|D]]]]

<pre><code>const Discord = require(&quot;discord.js&quot;);
const superagent = require(&quot;superagent&quot;);

module.exports = {
 name: &quot;hug&quot;,
 category: &quot;action&quot;,
 description: &quot;hug a user!&quot;,
 usage: &quot;hug &lt;user&gt;&quot;,
 run: async (client, message, args) =&gt; {
 let hugUser = message.mentions.users.first() 
 if(!hugUser) return message.channel.send(&quot;You forgot to mention somebody.&quot;);
 let hugEmbed2 = new Discord.MessageEmbed()
 .setColor(&quot;#36393F&quot;)
 .setDescription(`**${message.author.username}** hugged **himself**`)
 .setImage(&quot;https://i.kym-cdn.com/photos/images/original/000/859/605/3e7.gif&quot;)
 .setFooter(`© Yuki V5.3.1`, &quot;https://cdn.discordapp.com/avatars/489219428358160385/19ad8d8c2fefd03fa0e1a2e49a2915c4.png&quot;)
 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(&quot;#36393F&quot;)
 .setFooter(`© Yuki V5.3.1`, &quot;https://cdn.discordapp.com/avatars/489219428358160385/19ad8d8c2fefd03fa0e1a2e49a2915c4.png&quot;)
 message.channel.send(hugEmbed)
}
}
</code></pre>

I'm just wondering how I can use JavaScript to simulate a click on an element.
Currently I have:
<pre class="lang-js prettyprint-override"><code>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);
 }
}
</code></pre>
<pre class="lang-html prettyprint-override"><code>&lt;a href=&quot;http://www.google.com&quot; id=&quot;mytest1&quot;&gt;test 1&lt;/a&gt;&lt;br&gt;

&lt;script type=&quot;text/javascript&quot;&gt;
 simulateClick(document.getElementById('mytest1'));
&lt;/script&gt;
</code></pre>
But it's not working :(
Any ideas?

How to simulate a click with JavaScript?

 我只是想知道如何使用JavaScript来模拟点击一个元素。 目前我有： function simulateClick(control){    if (document.all)    {        control.click();    }    else    {        var evObj = document.createEvent('MouseEvents');      

问如何用JavaScript模拟点击？
EN

回答 10

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何用JavaScript模拟点击？EN

回答 10

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何用JavaScript模拟点击？
EN