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

　　

JavaScript中给onclick绑定事件后return false遇到的问题的更多相关文章

  1. JavaScript中this的绑定规则

    JavaScript中this的绑定规则 前言 我们知道浏览器运行环境下在全局作用域下的this是指向window的,但是开发中却很少在全局作用域下去使用this,通常都是在函数中进行使用,而函数使用 ...

  2. JavaScript利用闭包循环绑定事件

    我们经常在做前端面试题的时候,会遇到循环绑定事件后,输出打印结果,很多人总是搞不清楚,今天借此机会跟大家梳理一下闭包相关作用. 1.首先我们举一个简单的例子. html部分: <a href=& ...

  3. 探究JavaScript中的五种事件处理程序

    探究JavaScript中的五种事件处理程序 我们知道JavaScript与HTML之间的交互是通过事件实现的.事件最早是在IE3和Netscape Navigator 2中出现的,当时是作为分担服务 ...

  4. js中的前绑定和后绑定详解

    这篇文章详细介绍了js中的前绑定和后绑定,有需要的朋友可以参考一下 其主要意思就是看我有没有用过前绑定,即Dom树中的某些元素在还没有创建出来时,就指定该类型的元素一出生就应该拥有的某些事件.在实际开 ...

  5. 在Javascript中监听flash事件(转)

    在Javascript中监听flash事件,其实有两种做法: 1.在特定的环境下(例如专门制作的flash),大家约定一个全局函数,然后在flash的事件中用ExternalInterface.cal ...

  6. JavaScript中的鼠标滚轮事件详解

    JavaScript中的鼠标滚轮事件详解/*Firefox注册事件*/ ~~~Firefox: addEventListener('DOMMouseScroll', handler, false)if ...

  7. Javascript中页面加载完成后优先执行顺序

    Javascript中页面加载完成后优先执行顺序 document优先于windowwindow优先于element //document加载完成执行方法体 document.addEventList ...

  8. javascript中的cookie,以及事件解析

    Cookie: 它的意思是在本地的客户端的磁盘上以很小的文件形式保存数据,Cookie的处理原则上需要在服务器环境下运行,目前Chrome不可以在客户端操作Cookie,其他浏览器均可以,   Coo ...

  9. javascript中的双向绑定

    阅读目录 一:发布订阅模式实现数据双向绑定 二:使用Object.defineProperty 来实现简单的双向绑定. 前言: 双向数据绑定的含义:可以将对象的属性绑定到UI,具体的说,我们有一个对象 ...

随机推荐

  1. 如何用jquery实现实时监控浏览器宽度

    如何用jquery实现实时监控浏览器宽度 2013-06-05 14:36匿名 | 浏览 3121 次 $(window).width();这代码只能获取浏览器刷新时的那一刻的宽度,如何才能达到实时获 ...

  2. k8s监控api调用

    k8s监控api调用 curl -s --cacert /etc/kubernetes/ssl/ca.pem -basic -u fengjian:fengjian --insecure -X GET ...

  3. Ros使用Arduino 3用rosserial创建一个subscriber

    在前面的一节中,我们已经使用arduino创建了一个publisher节点,接下来将会用arduino来创建一个subscriber,接收电脑传去的信息并做出相应的反应. 1启动Arduino 将ar ...

  4. QT 14 线程使用

    1 线程基础 QThread 是对本地平台线程的一个非常好的跨平台抽象.启动一个线程非常简单.让我们看一段代码,它产生另一个线程,该线程打印hello,然后退出. // hellothread/hel ...

  5. ethereum/EIPs-1102 Opt-in provider access metamask不再默认直接连入网页

    eip title author discussions-to status type category created 1102 Opt-in provider access Paul Boucho ...

  6. solidity fallback函数

    什么是fallback函数: 出处:http://me.tryblockchain.org/blockchain-solidity-fallback.html 回退函数是合约里的特殊函数,没有名字,不 ...

  7. IntelliJ IDEA2018.3 最新破解方法 无需改host

    文章转自 https://blog.csdn.net/SmileLvCha/article/details/78936659 刚把idea升级到最新版,发现要重新激活,网上查了有改host的方法可行, ...

  8. 使用scrapy爬取海外网学习频道

    一:创建项目文件 1:首先在终端使用命令scrapy startproject huaerjieribao 创建项目 2:创建spider 首先cd进去刚刚创建的项目文件overseas 然后执行ge ...

  9. 扫描Linux服务器查找恶意软件和rootkit的一款工具

    官网参考官网安装教程:wget https://www.clamav.net/downloads/production/clamav-0.101.1.tar.gztar -zxvf clamav-0. ...

  10. Intellij实用技巧

    快捷键 Tradition 快捷键 介绍 Ctrl + Z 撤销 Ctrl + Shift + Z 取消撤销 Ctrl + X 剪切 Ctrl + C 复制 Ctrl + S 保存 Tab 缩进 Sh ...