创建隐藏但可访问的 mailto:// 链接

Question

我知道这个网站上已经有很多关于电子邮件混淆的内容。但最近我发现了这个我以前从未遇到过的简洁的小CSS-trick。

它显示了电子邮件地址（此处：[email protected]），但遗憾的是它没有生成可点击的 mailto:// 链接。如果有人将其输入为 href，当然该地址将再次可供机器人拾取。

所以我添加了一个小的 JavaScript 例程，它为所有 .e-mail 元素添加了一个事件侦听器：

// Email de-obfuscation, start mail client, copy email to clipboard:

document.querySelectorAll('.e-mail').forEach(e => { 

    // get the encoded email address from ::after and decode:

    function getDecodeEmail(event) {
        z=event.currentTarget;
        y=getComputedStyle(z,'::after');
        x=y.getPropertyValue('content');
        // reverse string rtl
        v=x.split("").reverse().join("");
        // remove all "
        return v.replace(/['"]+/g, '');
    };
    
    // onClick start mail client with decoded email address:

    e.addEventListener("click", event => {
        // prevent href=#
        event.preventDefault();
        // get the (reversed) email address of the calling anchor
        v=getDecodeEmail(event);
        //window.location.href="mailto:"+v;
        // former statement doesn't fire in SE code snippets, 
        // but you can try here: https://jsfiddle.net/jamacoe/Lp4bvn13/75/
        // for now, let's just display the link:
        alert("mailto:"+v);
    });

    // right mouse click copies email to clipboard:

    e.addEventListener("contextmenu", event => {
        // prevent href=#
        event.preventDefault();
        // get the (reversed) email address of the calling anchor
        v=getDecodeEmail(event);
        // copy v to clipboard
        navigator.clipboard.writeText(v);
        // just to check:
        navigator.clipboard.readText().then( clipText => alert(clipText) );
        // former statements don't work in SE code snippets,
        // but you can try here: https://jsfiddle.net/jamacoe/Lp4bvn13/75/

    });
});

.e-mail::after {
  content: attr(data-mailSvr) "
<a class=e-mail data-mailUsr=resu data-mailSvr=moc.niamod href=""></a>
40" attr(data-mailUsr);
  unicode-bidi: bidi-override;
  direction: rtl;
}

rrreee

一方面，我对这个解决方案非常满意。但另一方面，我认为我的 javascript 破坏了 HTML/CSS 的优雅和简单性。有谁知道如何补充电子邮件混淆的这种方法，仅使用纯 CSS + HTML，从而产生满足所有常见要求的可点击且可见的链接（即屏幕阅读器兼容、充分混淆、正确）格式化，右键可复制）？

Answer 1

我过去也做过类似的事情。我需要一种方法来在我的一个网站上显示我的电子邮件地址，但又不会在此过程中收到严重的垃圾邮件。我两年前实施了此操作，并且没有收到任何垃圾邮件。不过我没有用 CSS 做到这一点...这是纯 JS。

如果将鼠标悬停在结果上，您会看到它创建了一个可点击的电子邮件地址。

希望这有帮助。

let fname = "first";
let lname = "last";
let domain = "gmail.com";

email.innerHTML = `${fname}.${lname}@${domain}`;