return false,对阻止事件默认动作的一些测试代码


Posted in Javascript onNovember 17, 2010

首先页面上有一个 <textarea id="test"></textarea>
我们为其绑定以下事件

test.onkeydown = function(){ 
return false; 
} test.onkeyup = function(){ 
return false; 
} 
test.onkeypress = function(){ 
return false; 
}

我们分别注释掉其中的两个事件,每次测试仅绑定一个事件。
很明显我们每个函数都返回false,如果返回值可以阻止事件默认动作,那么文本框将无法输入任何内容。
看下面我测试的结果,注意红的部分。
最后我分别把事件绑定两次,每次返回false看是否能阻止默认动作。
还是用了一个a标记测试onclick 返回false 是否跳转。
侦听事件返回 false 是否阻止事件默认动作
  chrome IE-8 firfox oper Safari
onkeydown yes yes yes no yes
onkeyup no no no no no
onkeypress yes yes yes yes yes
onclick yes yes yes yes yes
keydown * 2 no 取最后的FN结果 no no no
keypress * 2 no 取最后的FN结果 no no no
click * 2 no 取最后的FN结果 no no no
e.preventDefault(); yes no yes yes(keydown:no) yes
e.returnValue = false no yes no no no

可以看出浏览器表现确实不太一样,当然IE是最麻烦的东西了。
最意外的是在oper中 绑定down 返回false,居然也不能阻止默认动作。
所以以后在写要阻止浏览器默认动作的时候,还用标准的方法比较好。(后面我提供了)
不然在多人协作的工作中,会相当麻烦。
演示的deom 有需要的可以发邮件给我。我就不贴上来了。
/* * 用下面的代码就不会发生悲剧了 
* 最终结论 
* E(e).stop(); 阻止时间冒泡 
* E(e).prevent();阻止时间默认行为 
*/ 
var E = function(e){ 
e = window.event || e; 
return { 
stop: function() { 
if (e && e.stopPropagation) e.stopPropagation(); 
else e.cancelBubble = true 
}, 
prevent: function() { 
if (e && e.preventDefault) e.preventDefault(); 
else e.returnValue = false 
} 
} 
}
Javascript 相关文章推荐
Jquery css函数用法(判断标签是否拥有某属性)
May 28 Javascript
jQuery循环动画与获取组件尺寸的方法
Feb 02 Javascript
JavaScript String 对象常用方法详解
May 13 Javascript
BootstrapTable+KnockoutJS自定义T4模板快速生成增删改查页面
Aug 01 Javascript
BootStrap modal模态弹窗使用小结
Oct 26 Javascript
几行js代码实现自适应
Feb 24 Javascript
JSONP基础知识详解
Mar 19 Javascript
Angularjs2不同组件间的通信实例代码
May 06 Javascript
基于JavaScript中标识符的命名规则介绍
Jan 06 Javascript
vue 中动态绑定class 和 style的方法代码详解
Jun 01 Javascript
详解搭建es6+devServer简单开发环境
Sep 25 Javascript
解决layui数据表格Date日期格式的回显Object的问题
Sep 19 Javascript
javascript利用初始化数据装配模版的实现代码
Nov 17 #Javascript
javascript拓展DOM操作 prependChild insertAfert
Nov 17 #Javascript
Javascript 静态页面实现随机显示广告的办法
Nov 17 #Javascript
Json对象替换字符串占位符实现代码
Nov 17 #Javascript
xml文档转换工具,附图表例子(hta)
Nov 17 #Javascript
js判断输入是否为正整数、浮点数等数字的函数代码
Nov 17 #Javascript
基于jQuery的图片大小自动适应实现代码
Nov 17 #Javascript
You might like
PHP+ajax 无刷新删除数据
2010/02/20 PHP
php 数据库字段复用的基本原理与示例
2011/07/22 PHP
2014年10个最佳的PHP图像操作库
2014/07/14 PHP
PHP中生成UUID自定义函数分享
2015/06/10 PHP
yii使用bootstrap分页样式的实例
2017/01/17 PHP
php数组和链表的区别总结
2019/09/20 PHP
TopList标签和JavaScript结合两例
2007/08/12 Javascript
动态添加js事件实现代码
2009/03/12 Javascript
在jQuery 1.5中使用deferred对象的代码(翻译)
2011/03/10 Javascript
Jquery 改变radio/checkbox选中状态,获取选中的值(示例代码)
2013/12/12 Javascript
innerHTML属性,outerHTML属性,textContent属性,innerText属性区别详解
2015/03/13 Javascript
js使用DOM操作实现简单留言板的方法
2015/04/10 Javascript
巧用Vue.js+Vuex制作专门收藏微信公众号的app
2016/11/03 Javascript
学习JavaScript图片预加载模块
2016/11/07 Javascript
函数四种调用模式以及其中的this指向
2017/01/16 Javascript
整理关于Bootstrap排版的慕课笔记
2017/03/29 Javascript
php register_shutdown_function函数详解
2017/07/23 Javascript
在Vue项目中引入腾讯验证码服务的教程
2018/04/03 Javascript
vue-cli项目中使用Mockjs详解
2018/05/14 Javascript
jQuery实现导航样式布局操作示例【可自定义样式布局】
2018/07/24 jQuery
Vue中rem与postcss-pxtorem的应用详解
2019/11/20 Javascript
ant-design-vue中的select选择器,对输入值的进行筛选操作
2020/10/24 Javascript
基于JavaScript实现轮播图效果
2021/01/02 Javascript
Django中实现一个高性能计数器(Counter)实例
2014/07/09 Python
基于Python Shell获取hostname和fqdn释疑
2016/01/25 Python
python3中bytes和string之间的互相转换
2017/02/09 Python
python输入多行字符串的方法总结
2019/07/02 Python
Win 10下Anaconda虚拟环境的教程
2020/05/18 Python
简单了解如何封装自己的Python包
2020/07/08 Python
python单例模式的应用场景实例讲解
2021/02/24 Python
Html5在手机端调用相机的方法实现
2020/05/13 HTML / CSS
如何开发一个JQuery插件
2016/07/28 面试题
出纳工作检讨书
2014/10/18 职场文书
2015年个人实习工作总结
2015/05/28 职场文书
《棉鞋里的阳光》教学反思
2016/02/20 职场文书
Spring Cloud Gateway去掉url前缀
2021/07/15 Java/Android