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 相关文章推荐
随机显示经典句子或诗歌的javascript脚本
Aug 04 Javascript
!DOCTYPE声明对JavaScript的影响分析
Apr 12 Javascript
Firefox中通过JavaScript复制数据到剪贴板(Copy to Clipboard 跨浏览器版)
Nov 22 Javascript
JS实现超精简的链接列表在固定区域内滚动效果代码
Nov 04 Javascript
JavaScript每天必学之数组和对象部分
Sep 17 Javascript
JavaScript实现类似拉勾网的鼠标移入移出效果
Oct 27 Javascript
AngularJS Controller作用域
Jan 09 Javascript
基于Vue实例生命周期(全面解析)
Aug 16 Javascript
JS原生瀑布流效果实现
Apr 26 Javascript
vue+webpack dev本地调试全局样式引用失效的解决方案
Nov 12 Javascript
JavaScript中reduce()的5个基本用法示例
Jul 19 Javascript
聊聊vue 中的v-on参数问题
Jan 29 Vue.js
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 上传功能实例代码
2010/04/13 PHP
PHP句法规则详解 入门学习
2011/11/09 PHP
PHP中is_dir()函数使用指南
2015/05/08 PHP
PHP实现将MySQL重复ID二维数组重组为三维数组的方法
2016/08/01 PHP
php微信支付之公众号支付功能
2018/05/30 PHP
PHP实现的只保留字符串首尾字符功能示例【隐藏部分字符串】
2019/03/11 PHP
使用jQuery.fn自定义jQuery翻页插件
2013/01/20 Javascript
jquery按回车提交数据的代码示例
2013/11/05 Javascript
iframe子页面获取父页面元素的方法
2013/11/05 Javascript
使用js画图之正弦曲线
2015/01/12 Javascript
jQuery实现选项卡切换效果简单演示
2015/12/09 Javascript
Restify中接入Socket.io报Error:Can’t set headers的错误解决
2017/03/28 Javascript
Vue input控件通过value绑定动态属性及修饰符的方法
2017/05/03 Javascript
MUI顶部选项卡的用法(tab-top-webview-main)详解
2017/10/08 Javascript
react项目如何使用iconfont的方法步骤
2019/03/13 Javascript
layui.tree组件的使用以及搜索节点功能的实现
2019/09/26 Javascript
Vue router安装及使用方法解析
2020/12/02 Vue.js
[48:00]完美世界DOTA2联赛循环赛 Forest vs Inki BO2第二场 11.04
2020/11/04 DOTA
Python线程之定位与销毁的实现
2019/02/17 Python
python中eval与int的区别浅析
2019/08/11 Python
基于python解线性矩阵方程(numpy中的matrix类)
2019/10/21 Python
python Popen 获取输出,等待运行完成示例
2019/12/30 Python
Django Admin后台添加数据库视图过程解析
2020/04/01 Python
Python openpyxl 插入折线图实例
2020/04/17 Python
python学习将数据写入文件并保存方法
2020/06/07 Python
css3中单位px,em,rem,vh,vw,vmin,vmax的区别及浏览器支持情况
2016/12/06 HTML / CSS
意大利综合购物网站:Giordano Shop
2016/10/21 全球购物
东方红海科技面试题软件测试方面
2012/02/08 面试题
《童年》教学反思
2014/02/18 职场文书
2014年大学庆元旦迎新年活动方案
2014/03/09 职场文书
yy婚礼主持词
2014/03/14 职场文书
公司应聘自荐书
2014/06/14 职场文书
四风问题个人对照检查剖析材料
2014/09/27 职场文书
2014离婚协议书范文(3篇)
2014/11/29 职场文书
中层干部考核评语
2015/01/04 职场文书
保证金退回承诺函格式
2015/01/21 职场文书