ChatGPT解决这个技术问题 Extra ChatGPT

How to simulate a click with JavaScript?

I'm just wondering how I can use JavaScript to simulate a click on an element.

Currently I have:

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>

But it's not working :(

Any ideas?

"Five Most Common Coding Errors": javascript.about.com/od/hintsandtips/a/worst_4.htm - Just about no one runs IE4 any more and so support for the document.all DOM is no longer required. It is really surprising though how many people still use it in their coding. Worse is that support for the document.all DOM is often tested for in order to determine the browser being used and if it is supported then the code assumes that the browser is Internet Explorer (which is completely wrong usage since Opera also recognises that DOM).

m
mb21

What about something simple like:

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

Supported even by IE.


@HermannIngjaldsson Yes it works perfectly in IE - msdn.microsoft.com/en-us/library/ie/ms536363%28v=vs.85%29.aspx
The question was "does it work in ie as well?" - the answer is yes - AFAIK at least down to 8, haven't checked 7
Did this not exist before? Why did the 2010 answers not mention this simple solution? Just curious...
@NinoŠkopac Works great currently for desktop but no guarantee to work with mobile browsers. Even the mozilla developer site doesn't show mobile support.
@Parth Maybe it did, it just didn't click for them.
K
KooiInc

[Edit 2022] The answer was really outdated. Simplified and modernized it.

Use element.dispatchEvent with a freshly created Event of the desired type.

Here's an example using event delegation.

Fork this stackblitz project to play around with it.

// 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`, `

One of us clicked #testMe. It was ${evt.isTrusted ? `you` : `me`}.

`); 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; }
Test me can be clicked

The old answer:

Here's what I cooked up. It's pretty simple, but it works: 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); } }


@Anderson Green: I have added an example to this jsfiddle: jsfiddle.net/KooiInc/W4BHD
Proof that this works (in Chromium): +1 with document.querySelector('[value="2706236"]').nextSibling.nextSibling.dispatchEvent(ev); :)
Well I tried your java-script on the vote up button :) (worked of-course)
To simulate exact user behavior, you should wrap the dispatchEvent or click invocations with setTimeout, as it appears that dispatchEvent is synchronous.
Event.initEvent is now deprecated developer.mozilla.org/en/docs/Web/API/Event/initEvent
B
BradBrening

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

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

This only fire jQuery event handlers, not the default behavior (browser goes to href in that case)
I don't know about sad but it sure can be convenient to not have to keep recoding the same browser detection routines time and again.
@ErikAigner: I was wondering the same, but glad that the accepted answer in this case is plain JavaScript and not jQuery. Seen that too many times on SO. Once more: jQuery is JavaScript, but JavaScript is not jQuery. Although I like to use jQuery, I'm seeing more and more that devs don't understand the real plain thing. My 2 cents, couldn't resist to comment. ;)
There are also a lot of humans that wouldn't know where to start if they had to wash their clothes by hand, since the majority of households own a washer, and almost as many have a clothes dryer. jQuery, much like modern appliances, have made an old chore much easier and less error prone. It's not the solution for everyone, however, downvoting an answer that accurately answers the question using more concise, understandable syntax while being cross-browser compatible seems backwards. +1.
@FreeAsInBeer Then you also shouldn't walk anywhere since driving is so much easier. But we know that's silly. You walk if you don't need to go far. You use plain JavaScript if you need to do something simple and don't want to load an entire library to do it. No need to waste gas/bandwitdth for something simple.
m
mnishiguchi
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.
}

Reference

https://developer.mozilla.org/en-US/docs/Web/Guide/Events/Creating_and_triggering_events

https://codepen.io/felquis/pen/damDA


I believe this should be the best answer nowadays
Nowadays it's easier to simply do element.click();. Most major browsers support this. See stackoverflow.com/a/25806894/470749 and stackoverflow.com/a/2381612/470749
A
Adam Salma

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

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

OP asked for JavaScript. Although this is compact and functional, some people prefer no-Library JS over things like jQuery.
Save space by downloading jquery?
Some people prefer assembly, as well.
@MH I think a more valid argument would be "to keep it simple". Your default profile here in SO is about the same size of jQuery.
N
Nate Barbettini

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

So, I changed the document.createEvent to 'MouseEvents' 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.

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

N
NullPointerException

Simulating an event is similar to creating a custom event. To simulate a mouse event

we gonna have to create MouseEvent using document.createEvent().

Then using initMouseEvent(), we've to set up the mouse event that is going to occur.

Then dispatched the mouse event on the element on which you'd like to simulate an event.

In the following code, I've used setTimeout so that the button gets clicked automatically after 1 second.

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

Automatically click


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

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

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


V
Vamshikiran Morlawar

Use timeout if the event is not getting triggered

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

N
NVRM

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:

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

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


Z
Zia Khan

The solution that worked for me.... Click event can be called on clicking the button or do it from JavaScript file. In this code either click on the button to show alert or simply call it on some condition or without condition

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

This is a Heading

This is a paragraph.


D
Dharman

Honestly none of the answers here worked for my specific case. jquery was out of the question so all those answers are untested. I will say I built this answer up from @mnishiguchi answer above but this was the only thing that actually ended up working.

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

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

Simply select the element from the DOM. The node has a click function, which you can call.

Or

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

I know. I was in a rush so I did not add an explanation. Sorry about that.
You don't use a # when you're getting an element by id. If you want to do that, use query selector, i.e. document.querySelector('#elment').click();.
Oops made another typo
u
user7610
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)
}
}

Hey! Code-only answers are discouraged. Screen-long code-only answers are doubly-discouraged. (And I don't accept suggestions to buy a bigger screen.)