今天在测试《JavaScript DOM编程艺术(第2版)》中第69页代码时,遇到了问题。本来预期效果应该是点击链接后不跳转当前页面,而是另外弹出有个窗口。但结果却是页面跳转了。代码如下图所示:

经过一番询问与搜索后,发现问题出在"return false;"没有成功发挥其作用,所以没有取消链接的默认行为,将访问者带离了当前窗口。如果是如下图代码所写,其成功传达,那么结果就是想要实现的效果。

那这问题是怎么回事呢?(参见网址:a标签的取消默认行为 - SegmentFault http://segmentfault.com/q/1010000002993720)

有个小Demo如下。

好吧,问题是怎么回事搞清楚了,但怎么解决呢?网上说都是说用event.preventDefault();有的说的更详细一点的就是要区分IE浏览器与非IE浏览器,他们阻止默认行为有部分差异,IE的应该是window.event.returnValue == false;还有得加上event.stopPropagation();阻止冒泡行为。然而。。。。。。我试了又试,并没有一个成功实现了取消默认行为的。

所以,暂时我并没有找到可以在分离JavaScript的同时,还能成功完成取消链接默认行为的办法,现在只能在a标签中写上onclick=""。

这真是一个悲伤的结局(╥╯^╰╥)

2015.9.6

这个故事还没完~~峰回路转,在前端群遇到一个好心人指点,发现原来return false;是可以实现的取消链接默认行为的,我没能成功实现的原因在于要用闭包(你瞧,这就是“unknown unknown”我都不知道闭包的存在怎么能解决问题呢),详细请搜索——“for循环 绑定事件”。

不过虽然走在了正确的方向,我还是屡屡受挫,一度怀疑自己其实还是搞错了,后来用console才找到问题所在——注!意!拼!写!

(返回去看第二张图,有一个document和popUp写错了,我当时居然一点没发现)贴下成功实现的关键代码截图:

回顾这次问题,我觉得我最大的收获就是学习了console的一点使用来寻找bug,太感谢创造出console的人了!

偶遇问题 - - JavaScript 取消链接默认行为问题的更多相关文章

  1. JS 传播事件、取消事件默认行为、阻止事件传播

    1.事件处理程序的返回值 通常情况下,返回值false就是告诉浏览器不要执行这个事件相关的默认操作.例如,表单提交按钮的onclick事件处理程序能通过返回false阻止浏览器提交表单,再如a标签的o ...

  2. day49—JavaScript阻止浏览器默认行为

    转行学开发,代码100天——2018-05-04 今天主要说明一下通过JavaScript对浏览器默认行为的阻止操作.比如右键菜单的行为. 阻止默认行为的语句为: return false; 例如,阻 ...

  3. Javascript 获取链接(url)参数的方法

    有时我们需要在客户端获取链接参数,一个常见的方法是将链接当做字符串,按照链接的格式分解,然后获取对应的参数值.本文给出的就是这个流程的具体实现方法. 当然,我们也可以用正则直接匹配,文章中也给出了一个 ...

  4. JavaScript禁止浏览器默认行为

    JavaScript禁止浏览器默认行为 1.实现源码 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN&quo ...

  5. JavaScript函数的默认参数(default parameter)

    JavaScript函数的默认参数(default parameter) js函数参数的默认值都是undefined, ES5里,不支持直接在形参里写默认值.所以,要设置默认值,就要检测参数是否为un ...

  6. idea-----怎样取消idea默认打开工程

    怎样取消idea默认打开工程 引用:https://jingyan.baidu.com/article/656db918c05135e381249cb7.html

  7. javascript的阻止默认事件和阻止冒泡事件

    这两个方面的知识,在妙味课堂中有听过,再次复习一下: 原文来自:[http://www.cnblogs.com/Essence/p/4266618.html] 事件冒泡与默认行为   在说事件冒泡之前 ...

  8. JavaScript停止事件冒泡和取消事件默认行为

    功能:停止事件冒泡 function stopBubble(e) { // 如果提供了事件对象,则这是一个非IE浏览器 if ( e && e.stopPropagation ) { ...

  9. JavaScript阻止冒泡和取消事件默认行为

    //功能:停止事件冒泡 function stopBubble(e) { if ( e && e.stopPropagation ) { e.stopPropagation(); } ...

随机推荐

  1. FILTER优化

    explain plan for select a.* from fxqd_list_20131115_new_100 a where (acct_no, oper_no, seqno, trans_ ...

  2. 携手 Google 和 Docker 为 Microsoft Azure 带来全新的开源容器技术

     发布于 2014-08-08 作者 陈 忠岳 今天对容器管理来说是个好日子.因为今天微软开放技术不止发布一项,而是两项开源计划来帮助云开发者将容器管理又向前推进一步.我们已开始与 Google ...

  3. 换成gnome3桌面后国际版qq不能输入中文问题

    困扰了好久的问题今天终于解决了,网上也没有完整的教程,所以在这里整理下 前几天给自己的ubuntu装上了gnome桌面,一切都挺正常的,桌面很炫,用着也很舒服,不过之前的qq却没办法输入中文了,下面我 ...

  4. 在Openstack H版部署Nova Cell 时 ,终端输入nova service-list 和 nova host-list 命令将报错

    关于Cell的基本介绍,可以参考贤哥的一篇文章: [OpenStack]G版中关于Nova的Cell  http://blog.csdn.net/lynn_kong/article/details/8 ...

  5. hdu 4284 状态压缩

    题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=4284 #include<cstdio> #include<cstring> # ...

  6. poj 1080 dp如同LCS问题

    题目链接:http://poj.org/problem?id=1080 #include<cstdio> #include<cstring> #include<algor ...

  7. JavaScript函数柯里化的一些思考

    1. 高阶函数的坑 在学习柯里化之前,我们首先来看下面一段代码: var f1 = function(x){ return f(x); }; f1(x); 很多同学都能看出来,这些写是非常傻的,因为函 ...

  8. HTTP协议介绍(SERVLET)

    本文是servlet的入门篇,主要简单介绍下http协议 1.什么是HTTP _ 1.http协议:_1. 复杂解释:   http(超文本传输协议)是一个基于请求与响应模式的.无状态的.应用层的协议 ...

  9. XML文件操作指南

    一.XML简介 XML的全名是eXtensible Markup Language(可以扩展的标记语言),它的语法类似HTML,都是用标签来描述数据.HTML的标签是固定的,我们只能使用.不能修改: ...

  10. “发送至Onenote”惹来的小麻烦(转)

    原文来自 :  http://blog.csdn.net/yiyu_0417/article/details/7864172 [看到这篇文章,我觉得以后我也会遇到这个问题,很有价值我就先拷贝了,留着以 ...