阻止冒泡 | 易学教程

事件冒泡阻止event.stopPropagation()

阅读更多关于事件冒泡阻止event.stopPropagation()

package { import flash.display.*; import flash.events.*; import flash.text.*; public class EventBubble extends Sprite { private var msgTxt:TextField; public var msg_txt:TextField; private var father1:Sprite; private var father2:Sprite; private var child1:Sprite; private var child2:Sprite; public function EventBubble() { this.father1 = new Sprite(); this.father2 = new Sprite(); this.child1 = new Sprite(); this.child2 = new Sprite(); this.msgTxt = this.getChildByName("msg_txt") as TextField; this.father1.graphics.beginFill(6671615); this.father1.graphics.drawRect(0, 0, 180, 140); this.father1

jquerymobile tap事件被触发两次

阅读更多关于 jquerymobile tap事件被触发两次

首先介绍一下这个问题出现的背景：我在写网站时想要一套代码兼容手机端和pc端，所以用了jquery和jquery mobile，点击事件用的jquerymobile tap事件，但是在移动端测试时出现点击一次但触发执行两次的情况，在网上找了一些资料，解决方案如下。 1、首先我在网上搜了一下相同问题的人，看到一个比较靠谱的回答。https://segmentfault.com/q/1010000000135980 有人提问原有的 click点击事件统统都会被执行两次，代码如下。 <!DocType html> <html> <head> <title>jquerymobile click triggered twice ?</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> </head> <body> <h1>奇怪了？！！</h1> <p>Some content here.</p> <p><img id="test" src="http://www.51roms.com/images/crazy.jpg" alt="Click me"></p> <script src="http://code.jquery.com/jquery

jQuery停止事件冒泡

阅读更多关于 jQuery停止事件冒泡

event.stopPropagation(); 在jQuery中提供了stopPropagation()方法来停止事件冒泡。终止事件在传播过程的捕获、目标处理或起泡阶段进一步传播。调用该方法后，该节点上处理该事件的处理程序将被调用，事件不再被分派到其他节点。在事件的处理中，可以阻止冒泡但是允许默认事件的发生。 <scripttype="text/javascript"> $(function(){ $("#hr_three").click(function(event){ event.stopPropagation(); }); }); <script> View Code return false; 在事件的处理中，可以阻止默认事件和冒泡事件。 <scripttype="text/javascript"> $(function(){ $("#hr_three").click(function(event){ event.stopPropagation(); }); }); <script> View Code event.preventDefault(); 它的作用是：事件处理过程中，不阻击事件冒泡，但阻击默认行为。例如，如果 type 属性是 "submit"，在事件传播的任意阶段可以调用任意的事件句柄，通过调用该方法，可以阻止提交表单。　注意，如果 Event

js中事件冒泡的理解与分析

阅读更多关于 js中事件冒泡的理解与分析

一. 事件事件的三个阶段：事件捕获 -> 事件目标 -> 事件冒泡捕获阶段：先由文档的根节点document往事件触发对象，从外向内捕获事件对象；目标阶段：到达目标事件位置（事发地），触发事件；冒泡阶段：再从目标事件位置往文档的根节点方向回溯，从内向外冒泡事件对象事件捕获：事件发生时首先发生在document上，然后依次传递给body，最后到达目的节点（即事件目标)，事件流模型：div →body→ html→ document 。事件冒泡：事件到达事件目标之后不会结束，会逐层向上冒泡，直至document对象，跟事件捕获相反。 onclick 事件冒泡，重写onlick会覆盖之前属性，没有兼容性问题 addEventListener(event.type, handle, boolean); IE8及以下不支持，属于DOM2级的方法，可添加多个方法不被覆盖。事件类型没有on，第三个参数false，表示在事件第三阶段（冒泡）触发，true表示在事件第一阶段（捕获）触发。如果绑定同一个事件同一个方法，只会执行一次，所以如果handle是同一个方法，只执行一次。 attachEvent(event.type, handle ); IE特有，兼容IE8及以下，可添加多个事件处理程序，只支持冒泡阶段，可以多次进行绑定，所以如果handle是同一个方法，绑定几次执行几次

js阻止事件冒泡

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

<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="http://www.baidu.com"onclick="alert('我是最里层！')">点击我</a>　　　　　　</div>　　　　</div>　　</form></body> 比如上面这个页面，分为三层：divOne是第外层，divTwo中间层，hr_three是最里层; 他们都有各自的click事件，最里层a标签还有href属性。运行页面，点击“点击我”,会依次弹出：我是最里层---->我是中间层---->我是最外层 ---->然后再链接到百度. 这就是事件冒泡，本来我只点击ID为hr_three的标签，但是确执行了三个alert操作。事件冒泡过程（以标签ID表示）：hr_three----> divTwo----> divOne 。从最里层冒泡到最外层。如何来阻止? 1.event.stopPropagation(); <script type="text

JS阻止事件冒泡的3种方法之间的不同

阅读更多关于 JS阻止事件冒泡的3种方法之间的不同

什么是JS事件冒泡？：在一个对象上触发某类事件（比如单击onclick事件），如果此对象定义了此事件的处理程序，那么此事件就会调用这个处理程序，如果没有定义此事件处理程序或者事件返回true，那么这个事件会向这个对象的父级对象传播，从里到外，直至它被处理（父级对象所有同类事件都将被激活），或者它到达了对象层次的最顶层，即document对象（有些浏览器是window）。如何来阻止Jquery事件冒泡？通过一个小例子来解释 <%@ 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>

JavaScript事件冒泡简介及应用

阅读更多关于 JavaScript事件冒泡简介及应用

一、什么是事件冒泡在一个对象上触发某类事件（比如单击onclick事件），如果此对象定义了此事件的处理程序，那么此事件就会调用这个处理程序，如果没有定义此事件处理程序或者事件返回true，那么这个事件会向这个对象的父级对象传播，从里到外，直至它被处理（父级对象所有同类事件都将被激活），或者它到达了对象层次的最顶层，即document对象（有些浏览器是window）。打个比方说：你在地方法院要上诉一件案子，如果地方没有处理此类案件的法院，地方相关部门会帮你继续往上级法院上诉，比如从市级到省级，直至到中央法院，最终使你的案件得以处理。二、事件冒泡有什么作用（1）事件冒泡允许多个操作被集中处理（把事件处理器添加到一个父级元素上，避免把事件处理器添加到多个子级元素上），它还可以让你在对象层的不同级别捕获事件。【集中处理例子】 < div onclick ="eventHandle(event)" id ="outSide" style ="width:100px; height:100px; background:#000; padding:50px" > < div id ="inSide" style ="width:100px; height:100px; background:#CCC" ></ div > </ div > < script type =

小程序阻止冒泡

阅读更多关于小程序阻止冒泡

<view id="outer" bindtap="handleTap1"> outer view <view id="middle" catchtap="handleTap2"> middle view <view id="inner" bindtap="handleTap3"> inner view </view> </view> </view> 除 bind 外，也可以用 catch 来绑定事件。与 bind 不同， catch 会阻止事件向上冒泡。例如在下边这个例子中，点击 inner view 会先后调用 handleTap3 和 handleTap2 (因为tap事件会冒泡到 middle view，而 middle view 阻止了 tap 事件冒泡，不再向父节点传递)，点击 middle view 会触发 handleTap2 ，点击 outer view 会触发 handleTap1 。一个 mut-bind 触发后，如果事件冒泡到其他节点上，其他节点上的 mut-bind 绑定函数不会被触发，但 bind 绑定函数和 catch 绑定函数依旧会被触发。来源： https://www.cnblogs.com/jinsuo/p/12260458.html

DOM 事件模型

阅读更多关于 DOM 事件模型

事件 HTML元素事件是浏览器内在自动产生的,当有事件发生时html元素会向外界(这里主要指元素事件的订阅者)发出各种事件,如click,onmouseover,onmouseout等等。 DOM事件流 DOM(文档对象模型)结构是一个树型结构，当一个HTML元素产生一个事件时，该事件会在元素结点与根结点之间的路径传播，路径所经过的结点都会收到该事件，这个传播过程可称为DOM事件流。主流浏览器的事件模型早在2004前在HTML元素事件的订阅，发送，传播，处理模型上各浏览器实现并不一致，直到DOM Level3中规定后，多数主流浏览器才陆陆续续支持DOM标准的事件处理模型 — 捕获型与冒泡型。目前除IE浏览器外，其它主流的Firefox, Opera, Safari都支持标准的DOM事件处理模型。IE仍然使用自己的模型，即冒泡型，它模型的一部份被DOM采用，这点对于开发者来说也是有好处的，只使用DOM标准，IE都共有的事件处理方式才能有效的跨浏览器。冒泡型事件(Bubbling) 这是IE浏览器对事件模型的实现，也是最容易理解的，至少笔者觉得比较符合实际的。冒泡，顾名思义，事件像个水中的气泡一样一直往上冒，直到顶端。从DOM树型结构上理解，就是事件由叶子结点沿祖先结点一直向上传递直到根结点

JavaScript-事件冒泡&Event和this的区别

阅读更多关于 JavaScript-事件冒泡&Event和this的区别

在事件冒泡中，this永远指的是当前事件的对象 window.event.srcElement当用在冒泡事件的时候，它永远指的是最初触发此事件的对象 onload = function ( ) { document . getElementById ( "bodyid" ) . onclick = function ( ) { alert ( window . event . srcElement . id ) ; } ; document . getElementById ( "divid" ) . onclick = function ( ) { alert ( window . event . srcElement . id ) ; } ; document . getElementById ( "pid" ) . onclick = function ( ) { alert ( window . event . srcElement . id ) ; } ; document . getElementById ( "spanid" ) . onclick = function ( ) { //如何阻止冒泡事件的进行 window . event . cancelBubble = true ; //不再进行触发其父级事件 } ; //----------补充扩展：

订阅阻止冒泡