• Skip to main content
  • Skip to secondary navigation
  • Skip to footer

recoveryArea

Content Management for Everyone!

  • About me
  • Blog
  • AB Testing
  • WordPress
  • Portfolio

Archives for April 2022

How to simulate clicks on non-supported HTML elements

4 April 2022 By iPasqualito

Working on an AB test, I had to write some code that involved using a clone for a clickable element. The original HTML element, an <svg> element, had to be hidden and replaced by a button. What this button should do is simple: hide a pop up on click.

My first thought was, I add a click event listener to that button and just pass that click to the original element like so:

// (this code is what my ab test framework expects to create an HTML element šŸ˜‰ )
{
   tagName: "a",
   attributes: {
      class: "a-button a-button--size-small a-button--mode-primary a-button--color-red ra-031-pin-weiter-button",
      innerHTML: `<div class="a-button__text">Weiter mit gewƤhlten Markt</div>`,
      onclick: () => closeButton.click() // simple, right?
   },
   position: "beforeend",
   target: messageContainer
}

Simple! Thank you all those years of experience, this should do the trick, right?

What I did not yet realize however was that <svg> elements do not support the HTMLElement.click() method so running into this error kind of stumped me…:

So then I started looking for a solution. The first thing I found was this, and it looked promising, but somehow did not cut the cake for me:

// click() is a function that's only defined on HTML elements.
// Fortunately it's a convenience function that we 
// can implement it ourselves pretty easily like so:

const target = document.querySelector("svg");

target.dispatchEvent(new Event('click'));

Also, since the handler for the original element’s click event was out of reach for me, I could not approach it directly so I just had to find a way to make this simulated click work.

Then I found this piece of code, but when I started using it I discovered that parts of it were deprecated but, great news, now I was getting somewhere! The click actually worked!

const ev = document.createEvent("SVGEvents");
ev.initEvent("click",true,true); // deprecated.. šŸ™

target.dispatchEvent(ev);

But.. using deprecated code is something I rather avoid. Looking for an even better solution should not be that hard anymore since I’m looking in the right direction. Then I found this, the final solution to my problem and come to think of it, quite predictable šŸ˜‰

const dispatchClick = target => {
   const ev = new MouseEvent('click', {
      view: window,
      bubbles: true,
      cancelable: true
   });
   target.dispatchEvent(ev);
};

Guess when you’re confused by a totally unexpected error, finding the correct solution sometimes takes you on a slight detour…

Filed Under: AB Testing, JavaScript

Footer

Office

recoveryArea
Nijverheidstraat 11-1
7511 JM Enschede

KvK: 65594940

Goals

Let's make a more elegant, easy to use internet, accessible for everyone. Let's move forward to an empathic, secular, sustainable future, enabled through science and technology.

Read my full profile

Get in touch

  • GitHub
  • LinkedIn
  • Twitter

Copyright © 2023 · From recoveryArea with

This website uses cookies to improve your experience. We'll assume you're ok with this, but you can opt-out if you wish. Cookie settingsACCEPT
Privacy & Cookies Policy

Privacy Overview

This website uses cookies to improve your experience while you navigate through the website. Out of these cookies, the cookies that are categorized as necessary are stored on your browser as they are essential for the working of basic functionalities of the website. We also use third-party cookies that help us analyze and understand how you use this website. These cookies will be stored in your browser only with your consent. You also have the option to opt-out of these cookies. But opting out of some of these cookies may have an effect on your browsing experience.
Necessary
Always Enabled
Necessary cookies are absolutely essential for the website to function properly. This category only includes cookies that ensures basic functionalities and security features of the website. These cookies do not store any personal information.
Functional
Functional cookies help to perform certain functionalities like sharing the content of the website on social media platforms, collect feedbacks, and other third-party features.
Performance
Performance cookies are used to understand and analyze the key performance indexes of the website which helps in delivering a better user experience for the visitors.
Analytics
Analytical cookies are used to understand how visitors interact with the website. These cookies help provide information on metrics the number of visitors, bounce rate, traffic source, etc.
Advertisement
Advertisement cookies are used to provide visitors with relevant ads and marketing campaigns. These cookies track visitors across websites and collect information to provide customized ads.
Others
Other uncategorized cookies are those that are being analyzed and have not been classified into a category as yet.
SAVE & ACCEPT