javascript - 初学JS，想要制作一个“点击链接，在当前页面显示，不发生跳转”的平稳退化demo，遇到了一些问题，希望得到大家的帮助！

Question

正在自学js，翻看dom艺术这本书，知乎上的伙伴都说内容很简单，可我自己倒是感觉挺纠结的

正在做练习，想要制作一个可以平稳退化的demo：“点击链接，A元素的图片地址替换页面展示区的图片地址，不发生跳转。”
1.做了好多次，一直不成功，直接进行了跳转，怀疑可能是函数的使用问题，求大神看一下该如何修改，多谢了
代码的地址在这里：http://codepen.io/getcha22/pen/EjzqxQ

---

2.这个demo涉及到，在外部JS文件中把实践添加到HTML文档的某个元素上：

element.event = action..

这里的action是可以直接写成一个函数名吗？ 还是必须需要把内容包含匿名函数中呢？
比如：

element.onclick=showFunction();

多谢大家的帮助！

为了大家的方便，下面是单独的js部分，全部的代码可以在codepen里面查看，辛苦大家了

window.onload = preparelinks;
function preparelinks (){
    var a_source = document.getElementsByTagName("a");
    for (var i = 0; i < a_source.length; i++) {
        if (a_source[i].getAttribute("href") == "disPic") {
            a_source[i].onclick = function () {
                popUp(this.getAttribute("href"));
                return false;
            }
        }
    }
}
function popUp(picUrl){
    document.getElementById("placehold").getAttribute("src",picUrl);
    return false;

}

Answer 1

你犯的错误都是很简单的问题，原因是你的基础不扎实，不过慢慢来就好了。

1.可以用element.onevent = listener 直接指定回调函数，不过最好不要这样做，因为有蛮多缺点，最主要就是只能指定一个回调函数，可以用标准中的element.addEventListener,或者element.attachEvent(低版本ie兼容)。

2.你代码的问题：

if (a_source[i].getAttribute("href") == "disPic") {

这里写成 .className === 'disPic',注意也不要写成setAttribute('class','disPic'),因为会有兼容性问题，某些版本的ie会要你写成'className'

document.getElementById("placehold").getAttribute("src",picUrl);

这里写成setAttribute

Answer 2

a_source[i].getAttribute("href") == "disPic"

因为你这个判断结果都是false,所以你链接上click事件并没有绑定上去，所以无法阻止默认的跳转行为。我觉得如果有计算机基础，看完W3CSCHOOL上然后再去看书，这里我推荐JavaScript高级程序设计。我就是这么过来的。

Answer 3

为什么你的href会是disPic或者这是一个比喻？

Answer 4

你的代码地址加载好慢，只看你贴出来的

一.你的疑问

这里的action是可以直接写成一个函数名吗？ 还是必须需要把内容包含匿名函数中呢？

可以直接写，你这里把函数赋给load事件就可以了，所以用函数名和用匿名函数包含都行

二.你代码中可能的问题
1.判断条件不对

if (a_source[i].getAttribute("href") == "disPic")

disPic是什么

1. popUp函数中

document.getElementById("placehold").getAttribute("src",picUrl);

应该是setAttribute不是getAttribute

Answer 5

前端主要参考MDN 和 CSSTrick 国内的还是不要看了

这个可以工作

window.onload = preparelinks;
function preparelinks (){
    var a_source = document.getElementsByTagName("a");
    for (var i = 0; i < a_source.length; i++) {
        if (a_source[i].getAttribute("class") == "disPic") {
            a_source[i].onclick = function () {
                popUp(this.getAttribute("href"));
                return false;
            }
        }
    }
}
function popUp(picUrl){
    document.getElementById("placehold").setAttribute("src",picUrl);
    return false;

}