如何向元素（或子元素）添加事件监听器

Question

我正在使用 Syncfusion 插件在 React 项目中渲染 PDF。但我需要在每个页面上有一个 onMouseEnter 事件（它呈现为画布）...但它目前作为插件的一部分不可用。

除了修改插件或使用补丁来修改插件之外，有没有办法可以在特定 div 的所有画布元素（或所有子元素）上附加事件侦听器？

我知道 React 并不总是喜欢事件监听器（因为它会与虚拟 DOM 或其他东西混淆），所以有什么聪明的方法可以做到这一点，或者我应该硬着头皮尝试修改包？

Answer 1

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

希望对你有帮助