【关于dom 事件冒泡、捕获 dom事件三个阶段】教程文章相关的互联网学习教程文章

阻止默认/冒泡事件(兼容ie)

(1) 阻止默认事件function(e){ if(e && e.preventDefault){ e.preventDefault(); }else{ //IE window.event.returnValue = false; }}(2) 阻止冒泡事件function(e){ if(e && e.stopPropagation){ e.stopPropagation(); }else{ //IE window.event.cancleBubble = true; }}原文:http://www.cnblogs.com/cyj7/p/4578485.html

jQuery[补1] - 事件冒泡和阻止冒泡【代码】【图】

假设网页上有两个元素,其中一个元素嵌套在另一个元素中,并且都被绑定了 click 事件,同时 body 元素上也绑定了 click 事件。<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title></title></head><body><div id="content">外层 div 元素<span>内层 span 元素</span>外层 div 元素 </div><div id="msg"></div><script src="../../vender/jquery-1.11.3/jquery-1.11.3.js"></script><script type="text/javascript"...

事件冒泡【代码】【图】

1. 什么是事件冒泡 在一个对象上触发某类事件(比如单击onclick事件),如果此对象定义了此事件的处理程序,那么此事件就会调用这个处理程序;如果没有定义此事件处理程序或者事件返回true,那么这个事件会向这个对象的父级对象传播,从里到外,直至它被处理(父级对象所有同类事件都将被激活),或者它到达了对象层次的最顶层,即document对象(有些浏览器是window)。2. 事件冒泡的作用 事件冒泡允许多个操作被集中处理(把事件处...

JS点击子元素不触发父元素点击事件(js阻止冒泡)【代码】

<html> <title></title> <head><meta charset="utf-8"><style type="text/css">.divone{width:100px;height:100px;background:black;position: relative;cursor: pointer}.divchild{position: absolute;margin:10px;width:50px;height:50px;background:white;cursor: pointer}</style><script type="text/javascript">function divone(){ //这里是divone事件的代码 console.log(‘divone事件‘);stopPropagation();} function divc...

javascript中的事件冒泡、事件捕获和事件执行顺序【代码】【图】

谈起JavaScript的 事件,事件冒泡、事件捕获、阻止默认事件这三个话题,无论是面试还是在平时的工作中,都很难避免。DOM事件标准定义了两种事件流,这两种事件流有着显著的不同并且可能对你的应用有着相当大的影响。这两种事件流分别是捕获和冒泡。和许多Web技术一样,在它们成为标准之前,Netscape和微软各自不同地实现了它们。Netscape选择实现了捕获事件流,微软则实现了冒泡事件流。幸运的是,W3C决定组合使用这两种方法,并且...

jQuery事件冒泡和默行为【代码】

<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>26-jQuery事件冒泡和默行为</title><style>*{margin: 0;padding: 0;}.father{width: 200px;height: 200px;background: red;}.son{width: 100px;height: 100px;background: blue;}</style><script src="js/jquery-1.12.4.js"></s...

js的事件冒泡和事件捕获【代码】【图】

一、定义事件捕获:从document到触发事件的那个节点,自上而下触发事件;事件冒泡:从触发事件节点依次向上触发事件,直到document。原声js中,绑定事件方法addEventListener(eventName,function,bool)的第三个参数控制事件触发顺序。true为捕获,false为冒泡,默认冒泡。event.stopPropagation()会阻止事件流的传播。二、实例html结构:<div id=‘parent‘><div id=‘child‘></div></div>给div绑定事件:1.冒泡过程parent.addE...

js事件冒泡【代码】

有时我们不希望冒泡或默认的事件发生,这样就需要一些jQuery的的方法阻止冒泡和默认的事件了。可以通过以下三种方法做到不同程度的阻止。 A:returnfalse --->In event handler ,prevents default behavior and event bubbing 。 returnfalse 在事件的处理中,可以阻止默认事件和冒泡事件。 B:event.preventDefault()---> In event handler ,prevent defaultevent (allows bubbling) 。 event.preventDefault()在事件的处理中...

React阻止事件冒泡失效【代码】【图】

两个在React组件上绑定的事件,产生冲突后,使用e.stopPropagation(),阻止冒泡和捕获,即可防止事件冲突,毫无问题。今天是踩了个React事件的坑,需求可以简化为:点击框体以外的部分则隐藏框体。最直接的想法,document上绑定个事件,设置控制显示隐藏的state为false,在框体上绑定个事件,阻止冒泡。这样点击框体内部就不会触发document上的事件。等写完了,发现一个问题,无法阻止冒泡,一搜索,好家伙,好多人问e.stopPropaga...

jQuery之防止冒泡事件,冒泡事件就是点击子节点,会向上触发父节点,祖先节点的点击事件。【代码】

冒泡事件就是点击子节点,会向上触发父节点,祖先节点的点击事件。下面是html代码部分:<body><div id="content">外层div元素<span>内层span元素</span>外层div元素 </div><div id="msg"></div></body>对应的jQuery代码如下:<script type="text/javascript"> $(function(){// 为span元素绑定click事件 $(‘span‘).bind("click",function(){var txt = $(‘#msg‘).html() +"<p>内层span元素被点击.<p/>";//获取html信息 ...

冒泡和默认事件【代码】

1<!DOCTYPE html> 2<html lang="zh"> 3<head> 4<meta charset="UTF-8"> 5<title>冒泡和默认事件</title> 6<style type="text/css"> 7 .sub { 8 width: 100px; 9 height: 100px;10 background-color: red;11 position: absolute;12 top: 50px;13 left: 50px;14}15 .sup {16 width: 200px;17 height: 200px;18 b...

阻止事件冒泡的三种手段【代码】

阻止事件冒泡的三种手段1、return false:可以阻止默认事件和冒泡事件2、event.stopPropagation/IE下event.cancelBubble = true;:可以阻止冒泡事件但是允许默认事件3、event.preventDefault();/IE下event.returnValue = false:可以阻止默认事件但是允许冒泡事件 1<!DOCTYPE html> 2<html> 3<head lang="en"> 4<meta charset="UTF-8"> 5<title>jQuery阻止冒泡</title> 6<style> 7 .div1{ 8 width: 140px; 9 ...

深入理解JavaScript事件冒泡【图】

一、什么是事件冒泡 在一个对象上触发某类事件(比如单击onclick事件),如果此对象定义了此事件的处理程序,那么此事件就会调用这个处理程序,如果没有定义此事件处理程序或者事件返回true,那么这个事件会向这个对象的父级对象传播,从里到外,直至它被处理(父级对象所有同类事件都将被激活),或者它到达了对象层次的最顶层,即document对象(有些浏览器是window)。 打个比方说:你在地方法院要上诉一件案子,如果地方没有处理...

js之事件冒泡和事件捕获详细介绍【图】

事件——怎样使用事件以及IE和DOM事件模型之间存在哪些主要差别,有需要的朋友可以参考一下 (1)冒泡型事件:事件按照从最特定的事件目标到最不特定的事件目标(document对象)的顺序触发。 IE 5.5: div -> body -> document IE 6.0: div -> body -> html -> document Mozilla 1.0: div -> body -> html -> document -> window(2)捕获型事件(event capturing):事件从最不精确的对象(document 对象)开始触发,然后到最精确(也可...

javascript事件冒泡

1. 事件 在浏览器客户端应用平台,基本生都是以事件驱动的,即某个事件发生,然后做出相应的动作。 浏览器的事件表示的是某些事情发生的信号。事件的阐述不是本文的重点,尚未了解的朋友,可以访问W3school教程 进行了解,这将有助于更好地理解以下的内容 。2.冒泡机制 什么是冒泡呢? 下面这个图片大家应该心领神会吧,气泡从水底开始往上升,由深到浅,升到最上面。在上升的过程中,气泡会经...