javascript - return false后a标签还是会跳转？
问题描述
<body>
<div id="main">
<ul>
<li><a href="./1.jpg" title="这是图片一" onclick="showPic(this); return false;">图片一</a></li>
<li><a href="./2.jpg" title="这是图片二" onclick="showPic(this); return false;">图片二</a></li>
<li><a href="./3.jpg" title="这是图片三" onclick="showPic(this); return false;">图片三</a></li>
</ul>
<img id="image" src="" />
<p id="description"></p>
</div>
<script type="text/javascript">
function showPic(element){
var image = document.getElementById("image");
var soure = element.getAttribute("href");
image.setAttribute("src",soure);
var text = element.getAttribute("title");
var description = document.getElementById("description");
description.firstChild.nodeValue = text;
}
</script>
</body>
return false后a标签还是会跳转，因为这句：description.firstChild.nodeValue = text; 把它注释了就不会跳转，或者换成：description.innerHTML = text;也不会跳转，这是什么情况呢？
还有一个问题是a标签的this默认返回的是href属性的值，比如上面的代码中，可以直接变成这样：image.setAttribute("src",element);，不用写成image.setAttribute("src",element.href);或element.getAttribute("href");，是因为a标签本来就是必须带href属性（正常情况下）所以就自动返回这个值吗？
这个问题很有趣，初看觉得匪夷所思。马上 COPY 了代码尝试了一下：
1.为什么 description.firstChild.nodeValue = text 会导致链接跳转？
因为 description.firstChild 是 null，也就是一个空对象。你修改 null 的属性有什么作用？只会导致代码抛出异常，不继续向下执行了。既然 JS 不继续执行了，那么 return false 就是失效的，也就是压根没有 return false。所以浏览器接着做了点击 a 标签的默认行为，也就是跳转到 href 的链接。
为什么 description.innerHTML = text; 没问题？因为这句 JS 不会导致异常，会正常执行下去，直到 return false。
2.为什么 setAttribute 时，element 等价于 element.getAttribute("href")？
如果你把 element.toString() 的结果打印出来就知道了，就是 href 的值。所以 setAttribute 的第二个参数会进行一次 toString 处理，确保值会是一个字符串对象，然后再赋值给相应属性。
再次不得不说，你这个问题提得很有价值，我自己也学到了。
这篇关于javascript - return false后a标签还是会跳转？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
