当点击 <div> 元素时，将其用作按钮并触发一个 mailto。

Question

我正在我的网页上创建一个自定义按钮，实际上它是一个<div>，我希望在单击该按钮时触发mailto。最好的方法是什么？

我已经尝试使用-onClick调用一个JavaScript函数，该函数如下：

function foo(){
    window.open("mailto:[e-mail]");
}

但这会首先在Chrome浏览器中打开一个新选项卡，然后询问要使用哪个应用程序发送电子邮件。这种体验不同于我们通常在HTML中简单地使用<a href=mailto:.....>时获得的体验。

我也可以在JS函数中创建一个新的文档元素，并像这样模拟点击 -

function sendEmail() {
    var mail = 'mailto:[e-mail]';
    var a = document.createElement('a');
    a.href = mail;
    a.click();
};

但我不太确定那是否是正确的方法！有没有更好的解决方案？

- divyanshm

---

使用<div>而不是块级的<a>有什么原因吗？您能更改标记/ CSS吗？ - George

如果我使用<a>标签，我无法完全自定义按钮，这就是为什么我转而使用<div>的原因。 - divyanshm

我有点困惑，你的“自定义”是什么意思？您可以像样式化 <div> 一样样式化 <a> ，只要您将其显示为块。 - George

你有一个链接或者一个示例代码可以提供吗？我的按钮也带有图片，而且页面包含多个浮动元素，所以我不能使用块级显示。 - divyanshm

也许如果您能发布您的标记，那么我们就可以看到您做错了什么。 - George

听听 @Aurovrata 的意见吧，他的回答更专业。否则我会遇到垃圾邮件的问题。 - ilyas Jumadurdyew

Answer 1

试试这个，然后告诉我它是否有效。(如果无效，我将删除答案。)

<script>
function sendEmail() 
{
    window.location = "mailto:[e-mail]";
}
</script>
<div onclick="sendEmail();">Send e-mail</div>

可以传递参数主题和正文，但我认为无法格式化文本：

<a href='mailto:[e-mail]?subject=Me&body=Hello!'>EMAIL</a>

- Tony

---

好的回答。 我更喜欢使用window.open(mailto:[e-mail])，因为这不会将用户带离您的应用程序，但仍然可以启动电子邮件客户端。 - skidadon

你测试过这个功能了吗，@skidadon？它不会让你离开应用程序/网站，只是启动客户端。 - Seth

不会将用户带离网站，在Chrome和Safari上至少如此。 - Locutus

用户是否被带离网站并打开外部客户端，取决于其电子邮件客户端的配置。如果用户没有配置外部电子邮件客户端，则会将其重定向离开该网站。 - Ajezior

如何传递格式化的电子邮件正文消息？比如我想使用<bold>标签。 - Yash

Answer 2

我知道我来晚了，但将这些答案结合成更简单实用的内容如何：

<div class="button" onclick="location.href='mailto:[e-mail]';">Send E-Mail</div>

- Chris Kempen

Answer 3

使用锚标签，但将display属性更改为block：

HTML

<a class="mailto" href="mailto:[e-mail]">Mail</a>

CSS

.mailto{
  display:block;
  width:100px;
  height:20px;
}

- George

Answer 4

这对我有用：

<script>
function sendEmail() 
{
    window.location.assign("mailto:[e-mail]");
}
</script>
<div onclick="sendEmail();">Send e-mail</div>

@Tony使用了相同的方法，只是添加了assign。

- Rick

Answer 5

为了使垃圾邮件机器人无法扫描网站上的电子邮件地址，您可以采用以下方法：

<div class="button" onclick="location.href='mail'+'to:xyz'+'@'+abc'+'.'+'com';">Send E-Mail</div>

你可以使用你的实际电子邮件地址的图像（截图）代替“发送电子邮件”文本，以使其更明显。

- Aurovrata

Answer 6

尝试使用以下函数和HTML代码。它将打开一个新的电子邮件客户端。

<div onclick="doMail();">


function doMail() {

    var email ="[e-mail]";
    location.href = "mailto:"+email;
}

- Yulimar

Answer 7

<div onclick="mailtoperformingFunction('inner');" id="divbutton">

<script type="text/javascript">
function mailtoperformingFunction()
{
}
</script>

- Vinay Pratap Singh Bhadauria

Answer 8

试试这个：

<div class="button" href="javascript: void(0)" onclick="location.href='mailto:[e-mail]';">Click to Send email</div>

- Kiran KV

---

嗨，你觉得这会起作用吗？ :) 请编辑您的帖子并解释一下。 - Ali