javascriptreactjsmouseeventej2-syncfusion

How to add an event listener to elements (or children)


I'm using a Syncfusion plugin to render a PDF in a React project. But I need an onMouseEnter event on each page (which renders as canvasses)... but it is not available currently as part of the plugin.

Short of modifying the plugin or using a patch to modify the plugin, is there a way I can attach an event listener on all canvas elements (or all children) of a specific div?

I know React does not always like event listeners (since it messes with the Virtual DOM or something), so is there any smart way to do it, or should I just bite the bullet and try to modify the package?


Solution

  • var parentElement = document.getElementById('parentElementId');
    
    function handleClick(event) {
      console.log('Clicked!');
      console.log('Target:', event.target);
    }
    parentElement.addEventListener('click', handleClick);
    
    function handleChildClick(event) {
       if (event.target.classList.contains('childElementClass')) {
          console.log('Child clicked!');
          console.log('Target:', event.target);
       }
    }
    parentElement.addEventListener('click', handleChildClick);
    

    I hope it will help you