在Javascript中使用href=mailto链接图像

Using href=mailto link from an image in Javascript

本文关键字：mailto 链接 图像 href Javascript      更新时间：2023-09-26

我做了一个主页。如果你点击任何地方的背景需要改变，除非你点击图片与联系人。如果你在联系人的图片中点击，一封邮件会发送一个电子邮件地址。

现在一切都在工作，唯一的问题是当我点击一张图片与a href mailto的背景消失。我不知道为什么它的工作方式不同，然后当我点击其他地方…这是主页:http://staehelinmeyer.carolburri.com/

一些代码:

<script type="text/javascript">
    var x=1;        //store which picture to show
    var MAX=10;     //store how much picture is
    var n=1;        //count until 10
    var y=x;        //prevent to not put the same image after itself
    function imgchanger(){  //changes the image
        n++;        //count until 10
        x= Math.floor(Math.random()*(MAX-1))+2;     //generate a random number between 2 and MAX
        if(x==y){   //if its the same image like what was before
            while(x==y){x= Math.floor(Math.random()*(MAX-1))+2;}    //generate a new number
        }
        if(n==MAX){     //if its the MAX time of clicking
            x=1;        //show the first picture
            n=1;        //and begin the counting from one
        }
        //change the picture
        document.getElementById("html").style.backgroundImage = "url(files/"+x+".jpg)";
        if (x==1){  //if its the first picture show the footer and the contact
            document.getElementById("contact_name").style.visibility='visible';
            document.getElementById("footer").style.visibility='visible';
        }
        else{       //else hide the footer and the contact
            document.getElementById("contact_name").style.visibility='hidden';
            document.getElementById("footer").style.visibility='hidden';
        }
        y=x;        //save what was the picture
     }    
</script>
<body onclick="imgchanger()">
<div id="page-wrap">
    <div style="height:0px; position:fixed; top:30px; right:5px; background-color:#f0f0f0;">
        <img alt="contact_name" id="contact_name" src="files/contact_name.png" />
        <a href="mailto:mail@mail.com">
            <img alt="contact" src="files/contact.png"/>
        </a>
    </div>
    <div id="footer" class="footer">
        Sample text
    </div>
</div>
</body>

添加以下代码:

$("a").bind("click", function(e) {
    e.stopPropagation();
});

有点像Munim Abdul所说的，尝试添加阻止传播

       <a href="mailto:mail@mail.com;" onclick="event.stopPropagation();">

试试这个函数:

function imgchanger(){  
    var x = Math.floor(Math.random()*11) //sets x to a random number between 1 and 10
    document.getElementById("html").style.backgroundImage = "url(files/" + x + ".jpg)";      
    document.getElementById("contact_name").style.visibility='hidden';
    document.getElementById("footer").style.visibility='hidden';
}

默认情况下，"contact_name"answers"footer"元素应该是可见的。这段代码产生一个1到10之间的随机数，然后隐藏你想要隐藏的两个元素，并且比你的代码小得多。

如果问题仍然存在，请在这里再次注释，我将再次查看。

我测试了一下，看起来很好，但是当我点击mailto时，背景是白色的，并且需要一些时间才能完全加载背景

相关文章：