JS邮箱替换报错Cannot read properties of undefined (reading 'target')

实现点击文本将base64编码的邮箱解码替换为真实地址的功能后，功能可正常运行，但控制台持续抛出错误：
Uncaught TypeError: Cannot read properties of undefined (reading 'target')

原有实现代码 #

JS逻辑 #

initEmails() {
    const emailToggles = document.querySelectorAll('.email');
    if (!emailToggles) {
        return;
    }

    emailToggles.forEach(toggle => {
        toggle.addEventListener('click', this.replaceEmail);
    });
}

replaceEmail(ev){
    const target = ev.target.closest('.email');

    if (!target.classList.contains('active')) {
        ev.preventDefault();
    }

    const email = atob(target.dataset.value);

    target.setAttribute('href', 'mailto:' + email);
    target.querySelector('.replace').innerText = email;

    target.classList.add('active');
}

HTML结构 #

<span>
    <h5>@lang('E-mail')</h5>
    <a href="javascript:void(0);" data-value="{{ base64_encode($employee->email) }}" class="email">
        <span class="replace">Toon e-mailadres</span>
    </a>
</span>

初始化校验逻辑 #

if (document.querySelector('.email') !== null) {
    this.initEmails();
    this.replaceEmail();
}

报错的核心原因是初始化逻辑里手动无参调用了this.replaceEmail()：
replaceEmail是点击事件的回调函数，正常由用户触发点击时，浏览器会自动传入事件对象ev，因此点击时功能可以正常运行；但页面加载阶段你手动调用这个函数时没有传入任何参数，函数内部的ev为undefined，访问ev.target就会抛出类型错误。

另外原有代码里还有两个不影响当前报错但存在隐患的问题：

• document.querySelectorAll无论是否匹配到元素，都会返回NodeList集合，永远不会为null，原来的if (!emailToggles) return判断完全无效
• 直接把this.replaceEmail传给addEventListener，如果是类组件场景，回调内的this指向会丢失，可能引发后续其他报错

1. 删除初始化逻辑里手动调用的this.replaceEmail()，修正后的初始化代码：

if (document.querySelector('.email') !== null) {
    this.initEmails();
    // 删除 this.replaceEmail() 这行无效调用
}

2. 修正initEmails方法的空判断，同时绑定回调时固定this指向：

initEmails() {
    const emailToggles = document.querySelectorAll('.email');
    // 用集合长度判断是否存在匹配元素
    if (emailToggles.length === 0) {
        return;
    }

    emailToggles.forEach(toggle => {
        // 用箭头函数包裹，固定this指向，避免上下文丢失
        toggle.addEventListener('click', (e) => this.replaceEmail(e));
    });
}

3. 给replaceEmail方法增加防御性判断，避免极端场景下元素不存在引发报错：

replaceEmail(ev){
    const target = ev.target.closest('.email');
    // 未找到匹配的邮箱元素时直接返回
    if (!target) return;

    if (!target.classList.contains('active')) {
        ev.preventDefault();
    }

    const email = atob(target.dataset.value);

    target.setAttribute('href', 'mailto:' + email);
    target.querySelector('.replace').innerText = email;

    target.classList.add('active');
}

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