阻止冒泡

JavaScript--事件模型 1、HTML事件处理程序 　1.直接在HTML中定义事件处理程序及动作： <input type="button" value="Click" onclick="alert('click')"> 　2.在HTML定义事件处理程序，调用其他地方的执行函数： <script> function show(){ alert("hello world！"); } </script> <input type="button" value="Click" onclick="show()"> 局部变量event就是指事件对象，onclick="alert(event.type)"弹出click事件 this值等于时间目标元素，比如onclick="alert(this.value)",可以得到input的value值。 2、DOM0级事件处理程序 　　优势：简单、跨浏览器的 　　弱点：每次只能绑定一个事件，多次绑定会覆盖前面的事件。 <script> var btn= document.getElementById("btn"); btn.onclick= function () { alert("hello world！"); } </script> <input type="button" value="Click" id="btn"> 　

事件流 描述的是从页面接收事件的顺序。 事件传递有两种方式：冒泡与捕获。 1.事件冒泡 IE的事件流叫做事件冒泡，即事件从最具体的元素到不具体的元素。 2.事件捕获 即从不具体的元素到具体的元素 事件冒泡和捕获的顺序 事件监听的添加和删除 以及各自的注意事项 阻止事件冒泡 普通的事件绑定 < style > . son { width : 100 px ; height : 100 px ; background : yellow ; } < / style > < div class = "grandfather" > 3 < div class = "son" > 1 < / div > < / div > < script > var son = document . getElementsByClassName ( "son" ) [ 0 ] ; son . onclick = function ( event ) { console . log ( "1" ) ; } son . onclick = function ( ) { console . log ( "我是son2" ) ; } < / script > ` 事件监听: addEventListener() 参数1 ： 事件类型 参数2 ： 触发事件后执行的函数 参数3 ： 布尔值 默认值是 false

1.event.stopPropagation(); 事件处理过程中，阻止了事件冒泡，但不会阻击默认行为（它就执行了超链接的跳转） 2.return false; 事件处理过程中，阻止了事件冒泡，也阻止了默认行为（比如刚才它就没有执行超链接的跳转） 还有一种有冒泡有关的： 3.event.preventDefault(); 如果把它放在头部A标签的click事件中，点击“点击我”。 会发现它依次弹出：我是最里层---->我是中间层---->我是最外层，但最后却没有跳转到百度 它的作用是：事件处理过程中，不阻击事件冒泡，但阻击默认行为（它只执行所有弹框，却没有执行超链接跳转） 来源： https://www.cnblogs.com/theArrow/p/7895139.html

最近更新:2014年03月02日09:54:44 首发链接: http://www.cnblogs.com/sprying/p/3194899.html 一、事件处理程序 1、HTML事件处理程序 如果当前绑定事件的元素是表单的一个输入元素；则this隐性指代可描述如下 function(){ with(document){ with(this.form){ with(this){ // 元素属性值 } } } } 2、DOM0级事件处理程序 事件处理程序是在元素的作用域中运行的，也就this引用当前元素。 3、DOM2级事件处理程序 addEventListener 、 removeEventListener 接受三个参数，最后一个参数是一个布尔值，false表示在冒泡阶段调用事件处理程序，true是在捕获阶段调用。通过addEventListener添加的匿名函数将无法移除。 4、IE事件处理程序 attachEvent 、 detachEvent ,此方法接受两个参数，事件处理程序名称和事件处理程序函数，事件都被添加到冒泡阶段；attachEvent方法内，this = window,相比Dom方法以添加事件相反顺序执行。 跨浏览器的事件处理程序 addHandler: function (element, type, handler) { if (element

本文介绍JavaScript事件相关的知识点，主要包括事件流、事件处理程序、事件对象(event)以及常见事件类型和事件委托等相关内容。 在网页开发涉及的三种基础技术( HTML CSS JavaScript )中，JavaScript主要负责处理页面的 行为 ，而所谓行为大多指的是 交互行为 。 JavaScript和HTML间的交互通过事件来实现 ，换句话来说事件其实就是页面文档或浏览器窗口中发生的特定交互，譬如页面中的按钮标签被点击我们称之为按钮的点击( click )事件，类似的还有页面加载事件、鼠标的移入移除等等。 通常,我们在开发中对事件的操作(处理)主要由两部分组成，即 事件注册 和 事件函数 。我们总是需要先通过特定的方式来给标签添加(注册)事件监听，当事件发生时事件函数将得以调用执行。本文以 能够清晰明确的把事件的传递过程、事件注册的方式、事件对象以及常见的事件类型讲解清楚 为目标。 事件流 事件流 描述的其实是事件内在的传递过程(顺序)。 我们的开发经验是，当我们给某些标签注册(绑定)了事件后，该事件被触发就会执行对应的事件处理函数。这似乎是一个顺理成章的经验，但事件到底是如何传递的呢 ？我们知道在网页中有很多的Node节点，而Node节点之间是复杂的树结构，事件在接收、传递和处理的时候，是按照 目标节点->上层节点->根节点 还是 根节点->下层节点-

本文转载自： https://www.cnblogs.com/dingjing0518/p/6839593.html 作者：dingjing0518 转载请注明该声明。 方式一：event.stopPropagation(); 1 $("#div1").mousedown( function (event){ 2 event.stopPropagation(); 3 }); 方式二：return false; 1 $("#div1").mousedown( function (event){ 2 　　 return false ; 3 }); 但是这两种方式是有区别的。return false 不仅阻止了 事件 往上冒泡，而且阻止了事件本身。event.stopPropagation() 则只阻止事件往上冒泡，不阻止事件本身。 来源： CSDN 作者： kkwant 链接： https://blog.csdn.net/kkwant/article/details/103788410

@click="click" //单击 @dblclick="dblclick" //双击 @mousedown="down" //按下 @mouseup="up" //抬起 @mousemove="move" //移动 @mouseleave="out" //指针移出元素范围外（不冒泡）。 @mouseout ="out" //指针移出元素，或者移到它的子元素上。 @mouseenter="enter" //指针移到有事件监听的元素内（不冒泡） @mouseover="enter" //指针移到有事件监听的元素或者它的子元素内。 @keydown="down" //键盘按下 @keyup="up" //键盘抬起 注意：mouseenter是穿过，所以只能触发一次改事件，而mouseover是位于上方，mouseenter事件只作用于目标元素，而mouseover最用于目标元素及其后代元素。mouseover(鼠标覆盖)。mouseenter(鼠标进入)。二者的本质区别在于,mouseenter不会冒泡,简单的说,它不会被它本身的子元素的状态影响到.但是mouseover就会被它的子元素影响到,在触发子元素的时候,mouseover会冒泡触发它的父元素.(想要阻止mouseover的冒泡事件就用mouseenter) 共同点:当二者都没有子元素时,二者的行为是一致的

事件基础 注意：本文不会深入探究Javascript的事件循环。 提到事件，相信每位Javascript开发者都不会陌生，由于Javascript是先有实现，后有规范，因此，对于大部分人来说，事件模块可以说是比较模糊的，本文将从不同角度帮助你理清楚事件模块。 事件的本质可以说是一个回调函数，当事件触发时会调用你的监听函数。 事件是一定会触发的，如果没有对应的监听函数，就不会执行回调。 比如下面就是用户点击指定元素打印日志的例子： document.querySelector('#button').onclick = function() { console.log('clicked'); }; 事件基础相信大家都没什么问题，重点在后面的内容。 事件监听方式 由于历史原因，Javascript目前存在三种事件监听方式： HTML代码中监听 DOM0级监听 DOM2级监听 Q: 为啥从DOM0级开始？ 1998年，W3C综合各浏览器厂商的现有API，指定了DOM1标准。在DOM1标准出现之前浏览器已有的事件监听方式叫做DOM0级。 Q：DOM1级监听到哪里去了？ 由于DOM1标准只是对DOM0标准的整理+规范化，并没有增加新的内容，因此DOM0级可以看做DOM1级。 HTML代码监听 <button onclick="alert('Hello World!')">点我</button>

在微信小程序的事件分为冒泡事件和非冒泡事件： 冒泡事件：当一个组件上的事件被触发后，该事件会向父节点传递。 非冒泡事件：当一个组件上的事件被触发后，该事件不会向父节点传递。 WXML的冒泡事件列表： 类型 触发条件 最低版本 touchstart 手指触摸动作开始 touchmove 手指触摸后移动 touchcancel 手指触摸动作被打断，如来电提醒，弹窗 touchend 手指触摸动作结束 tap 手指触摸后马上离开 longpress 手指触摸后，超过350ms再离开，如果指定了事件回调函数并触发了这个事件，tap事件将不被触发 1.5.0 longtap 手指触摸后，超过350ms再离开（推荐使用longpress事件代替） transitionend 会在 WXSS transition 或 wx.createAnimation 动画结束后触发 animationstart 会在一个 WXSS animation 动画开始时触发 animationiteration 会在一个 WXSS animation 一次迭代结束时触发 animationend 会在一个 WXSS animation 动画完成时触发 touchforcechange 在支持 3D Touch 的 iPhone 设备，重按时会触发 1.9.90 注

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信息 $('#msg').html(txt);// 设置html信息 }); // 为div元素绑定click事件 $('#content').bind("click",function(){ var txt = $('#msg').html() + "<p>外层div元素被点击.<p/>"; $('#msg').html(txt); }); // 为body元素绑定click事件 $("body").bind("click",function(){ var txt = $('#msg').html() + "<p