使用 <div> 作为按钮并在单击时触发 mailto答案

【问题标题】：Use <div> as a button and trigger a mailto when it is clicked使用 <div> 作为按钮并在单击时触发 mailto
【发布时间】：2013-11-07 12:38:18
【问题描述】：

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

我尝试使用-onClick 调用一个 javascript 函数，看起来像这样 -

function foo(){
    window.open("mailto:xyz@abc.com");
}

但这会首先在 Chrome 中打开一个新标签页，然后要求相关应用发送电子邮件。这种体验不同于我们通常在 HTML 中执行 <a href=mailto:.....> 时所获得的体验。

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

function sendEmail() {
    var mail = 'mailto:contact@test.com';
    var a = document.createElement('a');
    a.href = mail;
    a.click();
};

但我不太确定这是否正确！谁有更好的解决方案？

【问题讨论】：

是否有任何理由使用<div> 而不是块<a>？你能改变标记/CSS吗？
如果我使用标签，我无法完全自定义按钮，这就是我求助于
的原因
我很困惑，自定义是什么意思？您可以设置<a> 的样式，就像您可以设置<div> 的样式一样，前提是您将其显示为块
你有我可以参考的链接或小提琴吗？我的按钮也有图像，是的，页面由多个浮动元素组成，所以我不能使用块显示。
如果你可以发布你的标记可能会更容易，那么我们可以看到你做错了什么

标签： javascript html mailto

【解决方案1】：

试试这个，告诉我是否有效。（如果没有，我将删除答案。）

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

传递参数subject和body是可以的，但是我认为不能格式化文本：

<a href='mailto:xyz@yourapplicationdomain.com?subject=Me&body=Hello!'>EMAIL</a>

【讨论】：

好答案。我更喜欢 window.open(mailto:xyz@abc.com) 虽然...因为这不会使用户离开您的应用程序，但仍会启动电子邮件客户端。
你测试过这个吗，@skidadon？它不会带您离开应用程序/网站。它只是启动客户端
至少在 Chrome 和 Safari 上不会让用户离开网站。
离开站点，以及是否打开外部客户端，取决于用户电子邮件客户端的配置方式。如果用户没有配置外部电子邮件客户端，那么您将被引导离开该站点。
如何传递格式化的电子邮件正文。就像我想使用标签。

【解决方案2】：

我知道的聚会已经很晚了，但是将这些答案组合成更简单、更实用的东西怎么样：

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

【讨论】：

【解决方案3】：

使用锚标记但将显示属性更改为阻止：

HTML

<a class="mailto" href="mailto:contact@test.com">Mail</a>

CSS

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

【讨论】：

【解决方案4】：

这对我有用：

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

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

【讨论】：

【解决方案5】：

试试这个函数和html。它将打开一个新的电子邮件客户端。

<div onclick="doMail();">


function doMail() {

    var email ="xyz@abc.com";
    location.href = "mailto:"+email;
}

【讨论】：

【解决方案6】：

为了从扫描网站以查找电子邮件的垃圾邮件机器人混淆您的电子邮件，您可以执行以下操作，

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

除了“发送电子邮件”文本，您还可以放置实际电子邮件地址的图像（屏幕截图）以使其更加明显。

【讨论】：

【解决方案7】：

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

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

【讨论】：

【解决方案8】：

试试这个：

<div class="button" href="javascript: void(0)" onclick="location.href='mailto:abc@xyz.com';">Click to Send email</div>

【讨论】：

嗨，为什么你认为这会起作用？ :) 请编辑您的帖子并解释一下