正文
JavaScript中给onclick绑定事件后return false遇到的问题
小程序：扫一扫查出行【扫一扫了解最新限行尾号】
复制小程序
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<h1>IMAGES</h1>
<ul>
<li>
<a href="x_0001.gif" title="x_0001" onclick="showPicture(this);return false;">ImageOne</a>
</li>
<img id="placeholder" src="demo.png" alt="demo" title="demo">
</ul>
</body>
<script>
function showPicture(whichpic){
var source = whichpic.getAttribute("href");
var placeholder = document.getElementById("placeholder");
placeholder.setAttribute("src",source);
}
</script>
</html>
可以从上面代码中看出我的目的：通过点击链接，更换显示的图片，并且不会跳转。
因为是一个a标签，return false可以在点击链接后不跳转，但是，我觉得每次绑定事件的时候都要加上这么一句，为什么不直接将这一句return false写在绑定的事件函数中（showPicture）呢，于是乎，我就试了一下，将代码做了很微小的改动，如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<h1>IMAGES</h1>
<ul>
<li>
<a href="x_0001.gif" title="x_0001" onclick="showPicture(this);">ImageOne</a>
</li>
<img id="placeholder" src="demo.png" alt="demo" title="demo">
</ul>
</body>
<script>
function showPicture(whichpic){
var source = whichpic.getAttribute("href");
var placeholder = document.getElementById("placeholder");
placeholder.setAttribute("src",source);
return false;
}
</script>
</html>
但是为什么点击连接之后仍旧跳转了呢？不是返回false了吗？ 于是我怀疑绑定的showPicture并没有执行，所以就在showPicture中加了一条alert，但是证明这个showPicture是执行了的！那是为什么呢?
后来我发现了原因，先不说哪里有问题，我们还是先看第一个正常的代码，挑出了两段代码：
<a href="x_0001.gif" title="x_0001" onclick="showPicture(this);return false;">ImageOne</a>
<script>
function showPicture(whichpic){
var source = whichpic.getAttribute("href");
var placeholder = document.getElementById("placeholder");
placeholder.setAttribute("src",source);
}
</script>
请一定很仔细的看一下这个代码中的onclick，你会发现先执行showPicture，这个没毛病，然后，又return false，这里听一下，回想一下，咱们编程的时候，会在什么地方使用return？？？？？
没错，就是在定义函数的时候，会用到return，嗯~~~~，是不是有一点思路了，其实这里的onclick可以理解为就是定义一个函数而已，并不是调用函数，因为调用函数是在触发的时候，而这里只是在定义函数，那如果是下面这个写法：
<a href="x_0001.gif" title="x_0001" onclick="showPicture(this);">ImageFour</a>
<script>
function showPicture(whichpic){
var source = whichpic.getAttribute("href");
var placeholder = document.getElementById("placeholder");
placeholder.setAttribute("src",source);
return false;
}
</script>
好好想一下，直接在showPicture中return false，是不是让函数返回false，这个false返回给了谁呢？是onclick吗？肯定不是，要不然就会成功了？那是返回给了谁呢？请看下面这个代码：
<script>
function showPicture(whichpic){
var source = whichpic.getAttribute("href");
var placeholder = document.getElementById("placeholder");
placeholder.setAttribute("src",source);
return false;
}function onclick(){
var result = showPicture(this);
}
</script>
懂了吧？还没懂的话，就听我乱解释吧，定义onclick的时候，会调用showPicture函数，然后showPicture返回一个false，这个false不是返回给onclick事件，而是result，然而这个result并没有返回给onclick呀，所以只要将这个result返回给onclick就OK了，如下面这段代码：
<script>
function showPicture(whichpic){
var source = whichpic.getAttribute("href");
var placeholder = document.getElementById("placeholder");
placeholder.setAttribute("src",source);
return false;
}function onclick(){
var result = showPicture(this);
return result;
}
</script>
这样onclick才会接收到false，才不会跳转。如果我们要直接在showPicture里面写return 就要改一下a标签的onclick，将showPicture的返回值返回，看清楚，是将返回值返回，所以正确的代码如下
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<h1>IMAGES</h1>
<ul>
<li>
<a href="x_0001.gif" title="x_0001" onclick="return showPicture(this);">ImageOne</a>
</li>
<img id="placeholder" src="demo.png" alt="demo" title="demo">
</ul>
</body>
<script>
function showPicture(whichpic){
var source = whichpic.getAttribute("href");
var placeholder = document.getElementById("placeholder");
placeholder.setAttribute("src",source);
return false;
}
</script>
</html>
