Abhineet.in

unlearning the learnt

Menu
  • Home
  • About
  • CAT Preparation
Menu

Why click event not working on SVG

Posted on June 15, 2022April 5, 2023 by Abhineet Mittal

I created a simple menu with SVG icons and to my surprise, clicking on the icon was not taking me to the linked url.

It turned out that as SVGs are independent HTML objects, the target element is actually nested path. So, it does not match with the clicked element and thus click event listeners does not work on it.

Similarly, if you add others event listeners to the parent element of the SVG’s, it does not work.

There are multiple ways to fix this-

  1. Disable click on SVG elements by adding the CSS- pointer-events: none;

  2. Add event listener to the path element of SVG.

Problem solved.

References:

  1. https://gomakethings.com/detecting-click-events-on-svgs-with-vanilla-js-event-delegation/
Category: Coding

Leave a Reply Cancel reply

Your email address will not be published. Required fields are marked *

Categories

  • Business
  • CAT Preparation
  • Coding
  • Fiction
  • Finance
  • How-To-Life
  • Javascript
  • Life
  • Life at Infosys
  • Photoshop
  • Productivity
  • Publishing
  • Social Awareness
  • Startup
  • Technology
  • Uncategorized
  • Utilities
  • Visual Studio Code
  • Web Development
  • WordPress
  • Work Culture

Recent Posts

  • The Ultimate Guide to CAT Preparation: Tips and Tricks
  • Self-Publishing vs. Traditional Publishing: Which Is Right for You?
  • 7 Effective Strategies to Overcome Procrastination and Achieve Your Goals
  • How to detect English/ASCII string in PHP
  • The state of automobile dealerships in India

Recent Comments

  • Rohan George on Intermediate, Stream & Location: Luck by Chance
  • Ashika on Intermediate, Stream & Location: Luck by Chance
  • Steve on My first job, Infosys
  • SAKTHI on Finally, its Mysore…
  • Akash dhyani Akash on Training Begins…
© 2023 Abhineet.in | Powered by Minimalist Blog WordPress Theme