<!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中$.cookie()方法的使用[转]

    jquery.cookie.js插件: <script type="text/javascript" src="js/jquery-1.6.2.min.js&quo ...

  2. 【转】curl 命令行下载工具使用方法小结

    获取curl curl 命令行下载工具 curl的官方网站为: http://curl.haxx.se官方下载页面为:http://curl.haxx.se/download.html 你可能并不清楚 ...

  3. Qt 编程指南 4 按钮

    1按钮类的控件 逐个解释一下各个用途:(1)按压按钮 QPushButton最基本的按钮,点击该按钮通常是通知程序进行一个操作,比如弹个窗.下一步.保存.退出等等,这是经常用到的,操作系统里的对话框里 ...

  4. Javascript中的各结构的嵌套和函数

    各位朋友大家好,上周更新给大家分享了JavaScript的入门知识及各种常用结构的用法,那么,本次更新博主就跟大家更深入的聊一聊JS各结构的嵌套用法,及JS中及其常用的一种结构——函数.以下为函数和循 ...

  5. Linux安装consul

    1.下载并解压consul # cd /opt/ # mkdir consul # chmod 777 consul #cd consul #wget https://releases.hashico ...

  6. mysql innodb引擎 一次线上死锁分析排查步骤

    我们的线上erp系统一天使用人员反映部分数据死活保存不上而且页面操作很慢.开始以为操作数据量大的原因, 后来查看了我们线上的glowroot系统,发现slowtrace中有超长时间的访问,点开查看详情 ...

  7. PAT A1140 Look-and-say Sequence （20 分）——数学题

    Look-and-say sequence is a sequence of integers as the following: D, D1, D111, D113, D11231, D112213 ...

  8. linux mint软件安装

    安装linux mint步骤请自行百度,这里略过....下载地址:https://www.linuxmint.com/edition.php?id=246文档下载:https://www.linuxm ...

  9. 【Codeforces Round 1117】Educational Round 60

    Codeforces Round 1117 这场比赛做了\(A\).\(B\).\(C\).\(D\).\(E\),\(div.2\)排名\(31\),加上\(div.1\)排名\(64\). 主要是 ...

  10. Android Studio 导入工程

    最简单的方式 等待加载完就好了 第二种方式 在导入别人的android studio项目(假设为项目A)时,会遇到gradle不一致的情况,以下简短介绍解决方法: 1. 打开要导入的项目的目录,删除下 ...