如何创建一个可点击、可见但模糊的mailto://链接

Question

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

它显示了电子邮件地址(此处：[e-mail])，但遗憾的是，它没有生成可点击的mailto://链接。如果有人将其输入为href，当然该地址将再次为机器人程序准备好。

因此，我添加了一个litte 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) "040" attr(data-mailUsr);
unicode-bidi: bidi-override;
direction: rtl;
}

<a class=e-mail data-mailUsr=resu data-mailSvr=moc.niamod href=""></a>

一方面，我对这个解决方案非常满意。但另一方面，我认为我的javascript破坏了HTML/CSS的优雅和简单。有人知道如何补充这种电子邮件模糊处理的方法吗？只使用纯CSS+HTML，生成一个可点击且可见的链接，满足所有常见要求(即屏幕阅读器兼容、足够模糊、格式正确、可右键点击复制(？

Answer 1

我过去也做过类似的事情。我需要一种方法在我的一个网站上显示我的电子邮件地址，但在这个过程中不会收到可怕的垃圾邮件。我在两年前就实现了这一点，而且我还没有收到任何垃圾邮件。我没有用CSS做这件事。。。这是纯JS。

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

希望这能有所帮助。

let fname = "first";
let lname = "last";
let domain = "gmail.com";
email.innerHTML = `<a href="mailto:${fname}.${lname}@${domain}">${fname}.${lname}@${domain}</a>`;

<span id="email"></span>