您的位置：首页 > Web前端 > JavaScript

JavaScript中给onclick绑定事件后return false遇到的问题

2018-02-08 18:37 489 查看

<!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>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航