如何将邮件反爬虫的onmouseover代码迁移到独立JS文件实现复用

第一步：调整所有邮箱链接的HTML结构 #

移除所有邮箱链接的行内onmouseover属性，统一加上专属类名用于识别，示例如下：

<a href="mailto:testx@testsitex.com" class="protected-email">test@testsite.com</a>

所有需要保护的邮箱链接都加上protected-email类即可，原有href里的占位字符x不用修改。

第二步：创建独立JS文件 #

新建一个名为email-protect.js的文件，写入以下代码：

// 监听鼠标悬浮事件，提前替换邮箱地址
document.addEventListener('mouseover', function(e) {
  const targetLink = e.target.closest('.protected-email');
  // 只处理未处理过的保护类邮箱链接
  if (!targetLink || targetLink.dataset.isProcessed) return;
  
  targetLink.href = targetLink.href.replace(/x/g, '');
  // 标记为已处理，避免重复执行替换逻辑
  targetLink.dataset.isProcessed = 'true';
});

// 可选：加点击事件兜底，避免用户未悬浮直接点击的场景
document.addEventListener('click', function(e) {
  const targetLink = e.target.closest('.protected-email');
  if (!targetLink || targetLink.dataset.isProcessed) return;
  
  targetLink.href = targetLink.href.replace(/x/g, '');
  targetLink.dataset.isProcessed = 'true';
});

以上代码用事件委托实现，不管是页面初始加载的链接，还是后续动态插入的邮箱链接都能生效，不用重复绑定事件。

第三步：在需要复用的页面引入JS #

在所有需要用到该功能的页面的</body>标签之前，引入刚才创建的JS文件即可：

<script src="你存放JS文件的路径/email-protect.js"></script>

如果要把JS放在<head>里引入，记得给script标签加defer属性，保证DOM加载完成后再执行逻辑。

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