Javascript 为什么尝试替换图像源时会浏览到该图像？_Javascript_Dom Events

Javascript 为什么尝试替换图像源时会浏览到该图像？

javascript

Javascript 为什么尝试替换图像源时会浏览到该图像？,javascript,dom-events,Javascript,Dom Events,我是JavaScript新手（只读了几天书），我被这段代码所困扰。我已经看了一遍又一遍，但似乎不明白为什么它不起作用。我确信这是我刚刚忽略的一件非常简单的事情，我只是需要一双新的眼睛来看待这件事代码应该更新页面上的占位符图像，而不必重新加载页面。但是，当我单击图像的链接时，它会将我带到图像所在的链接，而不是替换占位符图像。以下是我的HTML代码： <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://

我是JavaScript新手（只读了几天书），我被这段代码所困扰。我已经看了一遍又一遍，但似乎不明白为什么它不起作用。我确信这是我刚刚忽略的一件非常简单的事情，我只是需要一双新的眼睛来看待这件事

代码应该更新页面上的占位符图像，而不必重新加载页面。但是，当我单击图像的链接时，它会将我带到图像所在的链接，而不是替换占位符图像。以下是我的HTML代码：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Image Gallery</title>
<script type="text/javascript" src="scripts/showPic.js"></script>
</head>
<body>

    <h1>Snapshots</h1>
    <ul>
        <li>
        <a href="images/cat.jpg" onclick="showPic(this); return false;" title="A Cat">Cat</a>
        </li>
        <li>
        <a href="images/night.jpg" onclick="showPic(this); return false;" title="Night">Night</a>
        </li>
        <li>
        <a href="images/coke.jpg" onclick="showPic(this); return false;" title="Coke">Coke</a>
        </li>
        <li>
        <a href="images/sport.jpg" onclick="showPic(this); return false;" title="Sports">Sport</a>
        </li>
        <li>
        <a href="images/mnms.png" onclick="showPic(this); return false;" title="MnM's">MnM's</a>
        </li>
        <li>
        <a href="images/kid.jpg" onclick="showPic(this); return false;" title="A Kid">Kid</a>
        </li>
    </ul>

    <br />

    <img id="placeholder" src="images/placeholder.jpg" alt="Place Holder Image" />

</body>
</html>


图像库
快照

下面是我用来完成此任务的JavaScript函数：

<script type="text/javascript">

function showPic(whichpic) { 
    var source = whichpic.getAttribute("href"); 
    var placeholder = document.getElementById("placeholder"); 
    placeholder.setAttribute("src",source);
}

</script>


函数showPic（whichpic）{
var source=whichpic.getAttribute（“href”）；
var placeholder=document.getElementById（“占位符”）；
占位符.setAttribute（“src”，源）；
}

当您单击超链接时，有两件事会发生：

HREF导航

onclick事件处理程序正在运行

您的

返回false有效地“阻止”事件处理程序执行任何其他操作，因此您在这方面做得很好。但是，将图像的地址存储在HREF
中可能不是一个好主意。请尝试以下方法：
<ul>
    <li>
    <a href="#" img="images/cat.jpg" onclick="showPic(this); return false;" title="A Cat">Cat</a>
    </li>
    <li>
    <a href="#" img="images/night.jpg" onclick="showPic(this); return false;" title="Night">Night</a>
    </li>
    <li>
    <a href="#" img="images/coke.jpg" onclick="showPic(this); return false;" title="Coke">Coke</a>
    </li>
    <li>
    <a href="#" img="images/sport.jpg" onclick="showPic(this); return false;" title="Sports">Sport</a>
    </li>
    <li>
    <a href="#" img="images/mnms.png" onclick="showPic(this); return false;" title="MnM's">MnM's</a>
    </li>
    <li>
    <a href="#" img="images/kid.jpg" onclick="showPic(this); return false;" title="A Kid">Kid</a>
    </li>
</ul>

这个例子看起来应该是可行的
然而，当一个人以这种方式收到意外的表单提交或意外的以下链接时（意外的原因是你的表单的提交或你的a
的onclick中有一个返回false；
），这通常是因为你的javascript代码引发了一个异常，而返回false
见：

功能警报跟随（elem）{
抛出新错误（'npup'）；//尝试注释这一行，事情就会按预期进行
警报（elem.href）
}

我认为你发布的示例看起来不错，但如果你的实时版本有一些小的差异，也许会这样？我怀疑占位符元素找不到，在其上设置src属性会引发破坏它的异常。精确复制的副本+上一个问题的粘贴副本我正在尝试再次关闭此占位符@BrianMoeskau，你会添加投票吗？嘿，Jaxidian，我尝试过这个新代码，但现在脚本所做的只是将url栏中的链接更新为。我正在单击的图片未显示在其自己的页面上或占位符图像的位置。我非常感谢你的答复。你还有别的解决办法吗？再次感谢。然后您还有一些其他问题（可能是您的文件路径错误）。这个解决方案有效。请看这里：嘿，Jaxidian，谢谢，脚本现在正在运行。：）问题是指向我的javascript函数的链接：由于某种原因，函数没有被正确调用，什么也没有发生。当我把函数放在html文件的body标签下面时，它现在工作得很好。非常感谢你！哈哈，我被困了好几天。我不知道为什么会有-1。我没有那样做。我试着投了赞成票，但它说我至少要有15个声望点。再次感谢，伙计。不是我减少了，但元素的自定义属性通常不是一个好主意。@npup：为什么？据我所见，这似乎是一种相当普遍的做法。
function showPic(whichpic) { 
    var source = whichpic.getAttribute("img"); 
    var placeholder = document.getElementById("placeholder"); 
    placeholder.setAttribute("src",source);
}

<a href="www.example.com" onclick="alertOrFollow(this); return false;">alert or follow?</a>
<script type="text/javascript">
    function alertOrFollow(elem) {
        throw new Error('npup'); // try commenting this line out and things work as expected
        alert(elem.href)
    }
</script>