阻止冒泡

如何阻止冒泡事件和默认事件

阅读更多关于如何阻止冒泡事件和默认事件

1 概述阻止冒泡和默认事件都是js中非常重要的，其实很简单，只需要一到两句语法即可，关键在于需要做兼容！ 2 阻止冒泡事件 function stopBubble ( e ) { if ( e && e . stopPropagation ) { e . stopPropagation ( ) ; } else { window . event . cancelBubble = true ; } } ; 3 阻止默认事件 function stopDefault ( e ) { if ( e && e . preventDefault ) { e . preventDefault ( ) ; } else { window . event . returnValue = false ; } return false ; } ; 来源： https://blog.csdn.net/qq_41800366/article/details/102754627

JS基础-DOM

阅读更多关于 JS基础-DOM

DOM DOM 事件的级别 DOM 事件模型 DOM 事件流 DOM 事件捕获的具体流程 Event 对象的常见应用自定义事件 DOM概述 | MDN DOM | MDN DOM操作 DOM事件级别 DOM0 onXXX类型的定义事件 element.onclick = function(e) { ... } DOM2 addEventListener方式 element.addEventListener('click', function (e) { ... }) btn.removeEventListener('click', func, false) btn.attachEvent("onclick", func); btn.detachEvent("onclick", func); DOM3 增加了很多事件类型 element.addEventListener('keyup', function (e) { ... }) eventUtil 是自定义对象，textInput 是 DOM3 级事件 DOM 事件模型捕获从上到下，冒泡从下到上。先捕获，再到目标，再冒泡 DOM事件流 DOM标准采用捕获+冒泡。两种事件流都会触发DOM的所有对象，从window对象开始，也在window对象结束。 DOM标准规定事件流包括三个阶段：事件捕获阶段处于目标阶段事件冒泡阶段

JavaScript-事件

阅读更多关于 JavaScript-事件

事件事件介绍事件是您在编程时系统内发生的动作或者发生的事情，系统通过它来告诉您在您愿意的情况下您可以以某种方式对它做出回应。 #### 常用事件事件名作用 click 监听元素的点击事件 mouseover 监听鼠标的移入事件（会产生冒泡） mouseenter 监听鼠标的移入事件（不会产生冒泡） mousemove 监听鼠标的移动事件 mouseout 监听鼠标的移除事件（会产生冒泡） mouseleave 监听鼠标的移除事件（不会产生冒泡） foucs 监听元素获取焦点 blur 监听元素失去焦点 load 监听元素加载完毕 input 监听输入框、文本框内容的改变（实时） change 监听对输入框、文本框内容的操作（仅在表单失去焦点触发，不需要改变） submit 监听表单的提交事件 keydown 监听任意键盘按键的按下事件 keypress 监听除 Fn 、 Shift 、 CapsLock 以外键盘按键的点击事件（持续） keyup 监听任意键盘按键的释放事件 mousedown 监听任意鼠标按键的按下事件 mouseup 监听任意鼠标按键的释放事件 darg 监听元素的拖动事件 scroll 监听页面的滚动事件 resize 监听窗口的缩放事件事件的绑定行内事件绑定 <button onclick="btnClick()">点我</button> //

阻止事件冒泡

阅读更多关于阻止事件冒泡

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>阻止事件冒泡</title> </head> <body> <div> <p> <span>点我</span> </p> </div> <script src="jquery-3.3.1.min.js"></script> <script> $("span").click(function (e) { alert("span"); e.stopPropagation(); }); $("p").click(function () { alert("p"); }); $("div").click(function () { alert("div"); }) </script> </body> </html> 来源： https://www.cnblogs.com/njuwyx/p/11656535.html

阻止事件冒泡兼容代码

阅读更多关于阻止事件冒泡兼容代码

//兼容代码 function stopPropagation ( e ) { e = e || window . event if ( e . stopPropagation ) { //w3c 阻止事件冒泡 e . stopPropagation ( ) } else { //IE 阻止事件冒泡 e . cancelBubble = true } } //事件调用兼容代码 document . getElementById ( 'dv2' ) . onclick = function ( e ) { stopPropagation ( e ) console . log ( 2 ) } 来源： https://blog.csdn.net/qq_44777678/article/details/101073732

关于事件处理那些事-js

阅读更多关于关于事件处理那些事-js

事件的三个阶段：第一个阶段: 捕获阶段第二个阶段：执行当前点击的元素第三个阶段：冒泡阶段 e.eventPhase 获取事件阶段：（取值 1，2，3）但能看到的就只有第一阶段和第三阶段事件冒泡，也叫事件委托，冒泡的作用就是事件委托下面看一段代码：、从代码中可以看到我们给‘li’，‘办了一个换背景颜色的事情’ ，但事情委托给了它的父节点‘ul'办事（onclick） ‘e’是事件参数（事件对象）：当事件发生的时候，可以获取一些事件相关的数据获取当前点击的li e.target 处理兼容性问题处理: e = e || e.srcElement; //阻止冒泡取消冒泡标准的DOM方法 e.stopPropadation() 非标准方式老版本的IE支持 e.canceBubble(); e.target 和 e.curentTarget : e.target 是真正触发事件的对象 ; e.curentTarget 和this一样，获取处理函数所属的对象；获取事件名称 e.type ： e.type的使用场景可以给多个事件，指向同一个函数，避免多次注册事件，节省内存代码案例：获取鼠标当前位置（坐标）: e.clientX ;e.clientY 获取鼠标在浏览器的可视区域的坐标 e.pageX ; e.pageY 获取在当前页面的位置（下拉到页面顶部都算

精选经典面试题(九)

阅读更多关于精选经典面试题(九)

事件、IE与火狐的事件机制有什么区别？如何阻止冒泡首先，这道题出得是有问题的，在DOM0级事件的情况下，基本上都是冒泡机制，没多大区别。好，只考虑DOM2.0级事件的情况。 IE11前只支持冒泡标准浏览器有三种事件阶段：捕获、处于事件源、冒泡如何阻止冒泡最简单的方法 return false stopPropagation+ie的cancelBubble 转载于:https://my.oschina.net/u/1792175/blog/598059 来源： https://blog.csdn.net/chuomu8273/article/details/100682011

事件冒泡

阅读更多关于事件冒泡

在我们日常生活中，冒泡泡是很常见滴~比如，水里的一条鱼吐泡泡，卟噜卟噜，又如下图（注意观察龙王旁边~）：那么在js中呢，也有一种冒泡，叫做“事件冒泡”，由IE提出。是指当触发某个元素的某个事件时，它会触发自己的对应事件，然后，依次向上触发所有父级的相同事件，如果中间有父级没有相同事件，那么就继续向上触发。接下来，我们来看一个小例子~ 代码： <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>事件冒泡</title> <style type="text/css"> .box1 { width: 400px; height: 400px; background-color: red; } .box2 { width: 300px; height: 300px; background-color: green; } .box3 { width: 200px; height: 200px; background-color: blue; } </style> </head> <body> <div class="box1"> <div class="box2"> <div class="box3"></div> </div> </div> </body> <script type="text

阅读更多关于阻止冒泡

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> #box1 { width: 300px; height: 300px; background-color: red; } #box2 { width: 200px; height: 200px; background-color: green; } #box3 { width: 100px; height: 100px; background-color: blue; } </style> </head> <body> <div id="box1"> <div id="box2"> <div id="box3"> </div> </div> </div> <script> // 事件冒泡 var box1 = document.getElementById('box1'); var box2 = document.getElementById('box2'); var box3 = document.getElementById('box3'); var array = [box1, box2, box3]; for (var i = 0; i < array.length; i++) {

JS如何阻止事件冒泡

阅读更多关于 JS如何阻止事件冒泡

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default5.aspx.cs"Inherits="Default5"%> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head runat="server"> <title>Porschev---Jquery 事件冒泡</title> <script src="jquery-1.3.2-vsdoc.js" type="text/javascript"></script> </head> <body> 　　<form id="form1" runat="server"> 　　　　<div id="divOne" onclick="alert('我是最外层');"> 　　　　　　<div id="divTwo" onclick="alert('我是中间层！')"> 　　　　　　　　<a id="hr_three" href="http://www.baidu.com" mce_href=

订阅阻止冒泡