<!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. github拓展，以及ModelForm的使用

    github - git  init/add/commit/reset/log/status/stash pop/checkout/branch    新入职到公司,地址:   git clone h ...

  2. python第五十一课——__slots

    2.__slots__: 作用:限制对象随意的动态添加属性 举例: class Demo: __slots__ = ('name','age','height','weight') #实例化Demo对 ...

  3. 从头学Android之RelativeLayout相对布局

    http://blog.csdn.net/worker90/article/details/6893246 相对布局对于做Web开发来说再熟悉不过了,我们在用CSS+DIV的时候经常会用到这些类似的相 ...

  4. Looper loop

    public static void loop() { final Looper me = myLooper(); if (me == null) { throw new RuntimeExcepti ...

  5. 1506 传话 （暴力DFS或者Tarjan模板题）

    题目描述 Description 一个朋友网络,如果a认识b,那么如果a第一次收到某个消息,那么会把这个消息传给b,以及所有a认识的人. 如果a认识b,b不一定认识a. 所有人从1到n编号,给出所有“ ...

  6. 【转】wampserver2.5 apache2.4.9配置https 图文

    注: 我的wamp环境是2.5版本,apache是2.4.9 装在本地C:wamp 操作系统windows10   1.进入wamp->bin->apache->apache2.4. ...

  7. ORB-SLAM2(4) 离线双目数据测试

    官网 https://github.com/raulmur/ORB_SLAM2 1从http://www.cvlibs.net/datasets/kitti/eval_odometry.php下载数据 ...

  8. day20 Python 高阶函数,函数，嵌套，闭包 装饰器

    高阶函数定义 1.函数接收的参数是一个函数名 2.函数的返回值是一个函数名 3.满足上述条件任意一个都可以称之为高阶函数 一.函数的接收参数是一个函数名 import time def foo(): ...

  9. OnlineJudgeServer运行

    我在这如下这两篇文章都说过青岛OJ相关的 OnlineJudgeFE之前端二次开发 青岛大学开源OJ平台搭建 今天我还是要来讲讲关于这个青岛OJ. 青岛OJ采用的是完全的前后端分离架构. Online ...

  10. 【Luogu P1074】靶形数独

    Luogu P1074 题意:给一个数独,问怎么填会使每个位置填的数乘以它的权值得到的和最大.其中每个位置的权值在题面中给出了. 思路:首先我们考虑搜索.由于我们不可能搜每个格子取太多的数,所以我们从 ...