深入了解preventDefault与stopPropagation

event.preventDefault()用法介绍(阻止默认事件)

该方法将通知 Web 浏览器不要执行与事件关联的默认动作(如果存在这样的动作)。例如,如果 type 属性是 "submit",在事件传播的任意阶段可以调用任意的事件句柄,通过调用该方法,可以阻止提交表单。注意,如果 Event 对象的 cancelable 属性是 fasle,那么就没有默认动作,或者不能阻止默认动作。无论哪种情况,调用该方法都没有作用。

该方法将通知 Web 浏览器不要执行与事件关联的默认动作(如果存在这样的动作)。

例如,如果 type 属性是 "submit",在事件传播的任意阶段可以调用任意的事件句柄,通过调用该方法,可以阻止提交表单。

注意,如果 Event 对象的 cancelable 属性是 fasle,那么就没有默认动作,或者不能阻止默认动作。无论哪种情况,调用该方法都没有作用。

例子:

1 $("a").click(function (e) {
2         alert("默认行为被禁止喽");
3         e.preventDefault();
4     });
5
6 <a href="http://www.baidu.com">测试</a>

event.stopPropagation()用法介绍(阻止冒泡)

该方法将停止事件的传播,阻止它被分派到其他 Document 节点。在事件传播的任何阶段都可以调用它。注意,虽然该方法不能阻止同一个 Document 节点上的其他事件句柄被调用,但是它可以阻止把事件分派到其他节点

该方法将停止事件的传播,阻止它被分派到其他 Document 节点。在事件传播的任何阶段都可以调用它。

注意:虽然该方法不能阻止同一个 Document 节点上的其他事件句柄被调用,但是它可以阻止把事件分派到其他节点。

event是DOM的事件方法,所以不是单独使用,比如指定DOM

 1 <div id="A">
 2     <div id="B">
 3     </div>
 4 </div>
 5 <script>
 6     var a = document.getElementById(‘A‘),
 7     b = document.getElementById(‘B‘);
 8     function handlera (e) {
 9         console.log(e.target);
10     }
11     function handler (e) {
12         console.log(e.target);
13         e.stopPropagation();
14     }
15 b.addEventListener(‘click‘, handler, false);
16 a.addEventListener(‘click‘, handlera, false);
17 </script>

点击B,输出:

1 <div id="B"></div>
 1 <div id="A">
 2     <div id="B">
 3     </div>
 4 </div>
 5 <script>
 6 var a = document.getElementById(‘A‘),
 7     b = document.getElementById(‘B‘);
 8 function handlera (e) {
 9     console.log(e.target + ‘a‘);
10 }
11 function handler (e) {
12     console.log(e.target + ‘b‘);
13 }
14 b.addEventListener(‘click‘, handler, false);
15 a.addEventListener(‘click‘, handlera, false);
16 </script>

点击B时,输出:

1 [object HTMLDivElement]b
2 [object HTMLDivElement]a

以上例子,不难看出stopPropagation()功能就是阻止了冒泡,上面第二个例子中,没有用这个方法阻止冒泡,当点击子元素时,由于事件冒泡,触发了父元素的click事件,所以第二个例子中会多出现一次输出内容,即为:触发A元素点击事件的输出内容。

jqueryreturn false等效于同时调用e.preventDefault()和e.stopPropagation();

return false除了阻止默认行为之外,还会阻止事件冒泡。如果手上有一份jquery源代码的话,可查看其中有如下代码:

1 if(ret===false){
2     event.preventDefault();
3     event.stopPropagation();
4 }

以上就是我对preventDefault与stopPropagation的了解,有很多的不足,请大家多多指出,多多留言,谢谢!!!

时间: 2024-10-26 05:54:19

深入了解preventDefault与stopPropagation的相关文章

preventDefault()、stopPropagation()、return false 之间的区别

"return false"之所以被误用的如此厉害,是因为它看起来像是完成了我们交给它的工作,浏览器不会再将我们重定向到href中的链接,表单也不会被继续提交,但这么做到底有什么不对呢? 可能在你刚开始学习关于jQuery事件处理时,看到的第一个例子就是关于如何阻止浏览器执行默认行为,比如下面这段演示click事件的代码 $("a.toggle").click(function () { $("#mydiv").toggle(); return

js中的preventDefault与stopPropagation详解

本篇文章主要是对js中的preventDefault与stopPropagation进行了介绍,需要的朋友可以过来参考下,希望对大家有所帮助. 首先讲解一下js中preventDefault和stopPropagation两个方法的区别:preventDefault方法的起什么作用呢?我们知道比如<a href="http://www.baidu.com">百度</a>,这是html中最基础的东西,起的作用就是点击百度链接到http://www.baidu.co

javascript中的preventDefault与stopPropagation作用介绍

preventDefault方法的起什么作用呢? 我们知道比如<a href="http://www.baidu.com">百度</a>,这是html中最基础的东西,起的作用就是点击百度链接到http://www.baidu.com,这是属于<a>标签的默认行为. 看一段代码大家就明白了: <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml">

js 阻止事件冒泡和默认行为 preventDefault、stopPropagation、return false

preventDefault: preventDefault它是事件对象(Event)的一个方法,作用是取消一个目标元素的默认行为.既然是说默认行为,当然是元素必须有默认行为才能被取消,如果元素本身就没有默认行为,调用当然就无效了.什么元素有默认行为呢?如链接<a>,提交按钮<input type=”submit”>等.当Event对象的cancelable为false时,表示没有默认行为,这时即使有默认行为,调用 preventDefault也是不会起作用的. 我们都知道,链接&

jQuery中return false,e.preventDefault(),e.stopPropagation()的区别

e.stopPropagation()阻止事件冒泡 <head> <title></title> <script src="http://cordial99.blog.163.com/blog/Scripts/jquery-1.4.1.js" type="text/javascript"></script> </head> <body> <table> <tr>

JQuery中event的preventDefault和stopPropagation介绍

event.preventDefault()阻止默认事件行为的触发. event.stopPropagation()防止事件冒泡到DOM树上,也就是不触发的任何前辈元素上的事件处理函数. 1 <!DOCTYPE html> 2 <html xmlns="http://www.w3.org/1999/xhtml"> 3 <head> 4 <meta http-equiv="Content-Type" content="

preventDefault和stopPropagation

preventDefault: 阻止它的默认行为的发生而发生其他的事情 stopPropagation: 阻止js事件冒泡

JS preventDefault ,stopPropagation ,return false

所谓的事件有两种:监听事件和浏览器对特殊标签元素的默认行为事件.监听事件:在节点上被监听的事件操作,如 select节点的change事件,a节点的click事件.浏览器的默认事件:特定页面元素上带的功能,如a标签的href跳转,表单的提交事件.执行监听事件在先,浏览器默认事件在后,所以可以在监听事件函数中,阻止浏览器的默认行为.区别:preventDefault() 阻止浏览器默认事件 stopPropagation() 阻止事件的冒泡 return false; 阻止后续的所有行为 1 <!

event.preventDefault() --- event.stopPropagation()

1.event.preventDefault()   阻止默认行为 <a href="http://www.baidu.com">链接</a> // 阻止默认行为 e.preventDefault(); $("a").click(function(){ event.preventDefault(); }) //阻止浏览器的默认行为 function stopDefault( e ) { //阻止默认浏览器动作(W3C) if ( e &