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

首先页面上有一个 <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
}
}
}

赞 (0)

相关推荐

  • Jquery的each里用return true或false代替break或continue

    复制代码 代码如下: function methodone(){ .... $.each(array,function(){ if(条件成立){ return true; } }); .... } 在一个function里有一个each,在each里某种条件 成立的话,就把这个function返回true或者false 但是在each代码块内不能使用break和continue,要实现break和continue的功能的话,要使用其它的方式 break----用return false; con

  • js中return false(阻止)的用法

    return false 阻止表单提交不起今天这个问题困扰了我很久,在网上找了很多资料,基本上关于onsubmit=return false有以下几点要注意的地方: 1. return 的返回值问题,函数中return一旦有返回值,就不在执行下面的语句,直接跳到函数调用的地方.如下PHP函数代码,第一个if条件符合则函数值返回布尔型false,可以返回一个函数的值,并且跳出这个函数:只要遇到return语句,程序就在那一行代码停止执行,执行控制将立刻返回到调用该程序的代码处. 复制代码 代码如下

  • return false;和e.preventDefault();的区别

    return false;和e.preventDefault();的区别

    Have you ever seen those two things (in the title) being used in jQuery? Here is a simple example: 复制代码 代码如下: $("a").click(function() { $("body").append($(this).attr("href")); return false; } That code would append the href a

  • 浅析return false的正确使用

    可能在你刚开始学习关于jQuery事件处理时,看到的第一个例子就是关于如何阻止浏览器执行默认行为,比如下面这段演示click事件的代码: 复制代码 代码如下: $("a.toggle").click(function () {      $("#mydiv").toggle();      return false; // Prevent browser from visiting `#`  }); 这个函数使用toggle来显示或者隐藏#mydiv,然后阻止浏览器

  • 学习jQuey中的return false

    jQuey中的return false作用是什么? 在众多的语句中都有return false的使用,当然对于熟悉它的开发者来说,当然是知根知底,知道此语句的作用,当然也就知道在什么时候使用此语句,不过对于初学者可能未必掌握的很清晰明了,下面通过实例介绍一下return false语句的作用. return语句的作用一般是返回函数值,并不再执行下面的语句,直接跳到函数调用的地方,另外还有一个重要的作用,那就是取消默认事件行为的发生. 代码实例如下: <!DOCTYPE html> <ht

  • 浅析onsubmit校验表单时利用ajax的return false无效问题

    复制代码 代码如下: /** * 表单提交校验 **/function onSubmit(){    if($('#name').val().length<2){        alert("名称请不少于两个汉字");        return false;    }    var t = new Date().getTime();    $.ajax({        type: "POST",        url: "/users/check

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

    首先页面上有一个 <textarea id="test"></textarea> 我们为其绑定以下事件 复制代码 代码如下: test.onkeydown = function(){ return false; } test.onkeyup = function(){ return false; } test.onkeypress = function(){ return false; } 我们分别注释掉其中的两个事件,每次测试仅绑定一个事件. 很明显我们每个函

  • javascript中return，return true,return false三者的用法及区别

    1.语法及返回方式 ①返回控制与函数结果 语法为:return 表达式; 语句结果函数的执行,返回调用函数,而且把表达式的值作为函数结果返回出去 ②返回控制无函数结果 语法为:return; 在大多数情况下,为事件处理函数如果让其返回false,可以防止默认的事件行为.例如,默认情况下,点击一个<a>标签元素,页面会跳转到该元素href属性指定的页. 而return false就相当于终止符,return true就相当于执行符. 在js中return false的作用一般是用来取消默认动作的

  • 阻止事件(取消浏览器对事件的默认行为并阻止其传播)

    取消浏览器对事件的默认行为(响应)(比如<a>标签的跳转等)并停止事件的继续传播. 实现代码 复制代码 代码如下: function stopEvent (evt) { var evt = evt || window.event; if (evt.preventDefault) { evt.preventDefault(); evt.stopPropagation(); } else { evt.returnValue = false; evt.cancelBubble = true; } }

  • js阻止冒泡及jquery阻止事件冒泡示例介绍

    js阻止冒泡 在阻止冒泡的过程中,W3C和IE采用的不同的方法,那么我们必须做以下兼容. 复制代码 代码如下: function stopPro(evt){ var e = evt || window.event; //returnValue如果设置了该属性,它的值比事件句柄的返回值优先级高.把这个属性设置为 fasle, //可以取消发生事件的源元素的默认动作. //window.event?e.returnValue = false:e.preventDefault(); window.ev

  • 完美实现js拖拽效果 return false用法详解

    本文为大家分享了完美实现js拖拽效果的具体代码,告诉大家return false的用法,供大家参考,具体内容如下 1.return false可以用来阻止默认事件即系统默认事件.例如通过阻止默认事件,来对textarea中的值进行范围限制(通过限制keycode的数值),也可以自定义在页面中的右键菜单(oncontextmenu). 2.在鼠标移动(mousemove)等事件中,是需要给事件传一个参数,保证程序的正常运行.而为了兼容取事件方法为:var oEvent=ev||event; 3.在

  • JQuery中阻止事件冒泡几种方式及其区别介绍

    JQuery 提供了两种方式来阻止事件冒泡. 方式一:event.stopPropagation(); 复制代码 代码如下: $("#div1").mousedown(function(event){ event.stopPropagation(); }); 方式二:return false; 复制代码 代码如下: $("#div1").mousedown(function(event){ return false; }); 但是这两种方式是有区别的.return

  • javascript阻止事件冒泡和浏览器的默认行为

    1.阻止事件冒泡,使成为捕获型事件触发机制. function stopBubble(e) { //如果提供了事件对象,则这是一个非IE浏览器 if ( e && e.stopPropagation ) //因此它支持W3C的stopPropagation()方法 e.stopPropagation(); else //否则,我们需要使用IE的方式来取消事件冒泡 window.event.cancelBubble = true; } 2.当按键后,不希望按键继续传递给如HTML文本框对象时

随机推荐