<!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. oracle使用with as提高查询效率

    经常在开发过程中会用到视图或组合查询的情况,但由于涉及表数据经常达到千万级别的笛卡尔积,而且一段查询时会反复调用,但结果输出往往不需要那么多,可以使用with将过滤或处理后的结果先缓存到临时表(此处原 ...

  2. Properties集合_练习

    定义功能:获取一个应用程序 运行次数,如果超过5次,给出使用次数已到请注册的提示,并不要再运行程序 思路:  1.定义计数器:每次程序启动都需要计数一次,并且是在原有的次数上进行计数.  2.计数器就 ...

  3. 阿里巴巴Java开发手册要点笔记 (一)

    1:[强制]Object 的 equals 方法容易抛空指针异常,应使用常量或确定有值的对象来调用 equals. 正例:"test".equals(object); 反例:obj ...

  4. 在web.xml中通过contextConfigLocation配置spring

    <context-param>         <param-name>contextConfigLocation</param-name>         < ...

  5. MATLAB——神经网络pureline激活函数

  6. SourceInsight工具增强——AStyle(代码格式化)、PC-Lint(静态检查)

    Artistic Style(AStyle) AStyle是一款开源.高效.精简的代码格式化工具,适用于C.C++.C#.Java等.官方地址在:http://astyle.sourceforge.n ...

  7. Tensorflow[架构流程]

    1. tensorflow工作流程 如官网所示: 根据整体架构或者代码功能可以分为: 图1.1 tensorflow架构 如图所示,一层C的api接口将底层的核运行时部分与顶层的多语言接口分离开. 而 ...

  8. RocketMQ环境搭建

    1 源码下载 wget http://mirror.bit.edu.cn/apache/rocketmq/4.2.0/rocketmq-all-4.2.0-bin-release.zip unzip ...

  9. LiveCharts文档-4基本绘图-1基本线条图

    原文:LiveCharts文档-4基本绘图-1基本线条图 4基本绘图-1基本线条图 using System; using System.Windows.Forms; using System.Win ...

  10. odoo11 外部数据导入方法2

    前面有一篇文章分析了如何使用2个分开的文件分别将外部数据导入到odoo对应的系统当中,如之前所说,是存在缺点的,现在测试将所有数据放入一个文件中将主表与从表的数据一次性导入,这样可以很方便的利用odo ...