从jQuery迁移到React JS：点击事件代码转原生JS优化求助

Hey there! Let's take a look at your code and refine it into something cleaner and more robust. First, let's note a couple of small issues in your current implementation that might cause problems down the line:

• Arrow functions don't bind their own this, so this.ref in your handler isn't referencing the clicked element (you probably meant this.href, but even that won't work here).
• Using return false in an arrow function event handler doesn't behave exactly like it does in jQuery—it won't properly stop event propagation in all cases, and it's less explicit than using native event methods.

Here are a couple of better approaches tailored to different scenarios:

1. Clean Static Element Handler #

If your .popUp elements are static (loaded once on page load), this concise version fixes the this issue and uses explicit event control:

document.querySelectorAll('.popUp').forEach(item => {
  item.addEventListener('click', (event) => {
    event.preventDefault(); // 明确阻止默认的链接跳转（替代return false）
    openWindow(item.href); // 直接用item.href，不用依赖this
  });
});

2. Event Delegation (Best for Dynamic Content) #

If your .popUp elements are added dynamically (比如通过AJAX加载、页面加载后创建), event delegation is far more efficient and reliable. Instead of attaching a listener to every single .popUp, we attach one to the document (或者更靠近的父容器，如果有的话):

document.addEventListener('click', (event) => {
  // 检查点击的元素是否匹配我们的选择器
  if (event.target.matches('.popUp')) {
    event.preventDefault();
    openWindow(event.target.href);
  }
});

这种方式有两个核心优势：

• 只需要创建一个事件监听器，当你有大量.popUp元素时，性能更好。
• 自动对后续添加到DOM中的.popUp元素生效，不需要重新绑定监听器。

额外：更简洁的语法（适合简单逻辑） #

如果你偏好更短的代码同时不牺牲可读性，可以用简化的箭头函数写法：

document.querySelectorAll('.popUp').forEach(item => 
  item.addEventListener('click', e => (e.preventDefault(), openWindow(item.href)))
);

注意这种写法只适合处理逻辑简单的情况，复杂逻辑还是用完整的函数块更清晰。

内容的提问来源于stack exchange，提问作者David Acevedo