<!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. javascript中apply()和call()方法及区别

    call()和apply()方法 1.方法定义 call方法: 语法:obj.call(thisObj, arg1, arg2, ...); 定义:调用一个对象的一个方法,以另一个对象替换当前对象. ...

  2. POJ1419 Graph Coloring

    嘟嘟嘟 求无向图的最大独立集. 有这么一回事:最大独立集=补图的最大团. 所谓的最大团,就是一个子图,满足图中任意两点都有边. 然后ssy巨佬告诉了我一个很没有道理强的做法:随机. 每一次random ...

  3. Spring Boot中Web应用的统一异常处理

    我们在做Web应用的时候,请求处理过程中发生错误是非常常见的情况.Spring Boot提供了一个默认的映射:/error,当处理中抛出异常之后,会转到该请求中处理,并且该请求有一个全局的错误页面用来 ...

  4. javascript中call,apply,bind的用法对比分析

    这篇文章主要给大家对比分析了javascript中call,apply,bind三个函数的用法,非常的详细,这里推荐给小伙伴们.   关于call,apply,bind这三个函数的用法,是学习java ...

  5. LabelImg 图像图像标注工具

    https://github.com/tzutalin/labelImg windos版本请不要把存放在中文目录下,否则打不开.

  6. 转载 精进不休 .NET 4.0 (5) - C# 4.0 新特性之并行运算(Parallel) https://www.cnblogs.com/webabcd/archive/2010/06/03/1750449.html

    精进不休 .NET 4.0 (5) - C# 4.0 新特性之并行运算(Parallel)   介绍C# 4.0 的新特性之并行运算 Parallel.For - for 循环的并行运算 Parall ...

  7. Cookie，Session的区别

    1.Cookie 存储在用户本地上即客户端的数据,用来辨别用户的身份. 如果勾选了记住我则会在C盘中保存Cookie的信息,直至Cookie设置的有效期过期 注意: (1)记录用户访问次数 (2)不可 ...

  8. (转)linux下查看已安装的软件与卸载

    因为linux安装软件的方式比较多,所以没有一个通用的办法能查到某些软件是否安装了.总结起来就是这样几类: 1.rpm包安装的,可以用rpm -qa看到,如果要查找某软件包是否安装,用 rpm -qa ...

  9. MariaDB CEO 痛斥云厂商从不回馈社区

    导读 MariaDB 首席执行官 Michael Howard 表示,亚马逊和 Oracle 将客户牢牢锁定.他还想知道 AWS 是否可能对 AWS MariaDB 实例动手脚,好让 AWS 自己的数 ...

  10. 基于TerraExplorer Pro 6.1 实现对Shape中Feature对象拾取查询

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...