Hoe een klik simuleren met JavaScript?

Ik vraag me af hoe ik JavaScript kan gebruiken om een klik op een element te simuleren.

Momenteel heb ik:

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>

Maar het werkt niet 🙁

Enig idee?

Antwoord 1, autoriteit 100%

Dit is wat ik heb bedacht. Het is vrij eenvoudig, maar het werkt:

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

Gebruik:

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

Antwoord 2, autoriteit 91%

Hoe zit het met iets simpels als:

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

Ondersteundzelfs door IE.

Antwoord 3, autoriteit 18%

Heb je overwogen om jQuery te gebruiken om alle browserdetectie te vermijden? Met jQuery zou het zo eenvoudig zijn als:

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

Antwoord 4, Autoriteit 5%

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

Referentie

• https://developer.mozilla.org/en- US / DOCS / WEB / GIDS / EVENEMENTEN / MAAKEN_AND_TRIGGERING_EVENTS
• https://codepen.io/felquis/pen/damda

Antwoord 5, Autoriteit 3%

Je zou jezelf een bos van de ruimte kunnen besparen door jQuery te gebruiken. U hoeft alleen maar te gebruiken:

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

Antwoord 6

Het bovenste antwoord is de beste! Het is echter niet activeren van muis-events voor mij in Firefox wanneer etype = 'click'.

Dus heb ik de document.createEventnaar 'MouseEvents'en die het probleem opgelost. De extra code is om te testen of een ander bit van de code interfereert met het evenement, en als het is geannuleerd, zou ik dat inloggen op de 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.
    } 
  }
}

Antwoord 7

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

Volg deze link om meer te weten te komen over de muisgebeurtenissen die Javascript en browsercompatibiliteit gebruiken voor hetzelfde

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

Antwoord 8

Het simuleren van een evenement is vergelijkbaar met het maken van een aangepast evenement. Een muisgebeurtenis simuleren

• we zullen MouseEventmoeten maken met document.createEvent().
• Dan moeten we initMouseEvent()gebruiken om de muisgebeurtenis in te stellen die zal plaatsvinden.
• Verzonden vervolgens de muisgebeurtenis naar het element waarop u een gebeurtenis wilt simuleren.

In de volgende code heb ik setTimeoutgebruikt zodat er na 1 seconde automatisch op de knop wordt geklikt.

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>

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>

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.getElementById("element").click()

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