事件冒泡之cancelBubble和stoppropagation的区别
事实上stoppropagation和cancelBubble的作用是一样的，都是用来阻止浏览器默认的事件冒泡行为。
不同之处在于stoppropagation属于W3C标准，试用于Firefox等浏览器，但是不支持IE浏览器。相反cancelBubble不符合W3C标准，而且只支持IE浏览器。所以很多时候，我们都要结合起来用。不过，cancelBubble在新版本chrome,opera浏览器中已经支持。
语法：e.stopPropagation();
参数e：表示事件传递的参数，代表事件的状态。
- <html>
- <head>
- <title>冒泡测试</title>
- </head>
- <body onclick="alert('body');">
- <div onclick="clickBtn(event)" style="width:100px;height:100px; background:#666;">
- <input id="Button1" type="button" value="button" onclick="alert('btn');" />
- </div>
- <script language="javascript" type="text/javascript">
- function clickBtn(event)
- {
- event=event?event:window.event;
- event.stopPropagation();
- alert("OK");
- }
- </script>
- </body>
- </html>
事件冒泡之cancelBubble和stoppropagation的区别的更多相关文章
- JQuery中阻止事件冒泡的两种方式及其区别
JQuery 提供了两种方式来阻止事件冒泡. 方式一:event.stopPropagation(); $("#div1").mousedown(function(event){ ...
- vue.js阻止事件冒泡和默认事件
首先我们来看原生JS取消事件冒泡方法: e.stopPropagation(); //非IE浏览器window.event.cancelBubble = true; //IE浏览器 原生JS阻止默认事 ...
- DOM事件机制(事件捕获和事件冒泡和事件委托)
内容: 1.事件复习 2.事件冒泡与事件捕获 3.事件委托 1.事件复习 (1)事件 事件是用来处理响应的一个机制,这个响应可以来自于用户(点击, 鼠标移动, 滚动), 也可以来自于浏览器 下面的链接 ...
- js事件冒泡、阻止事件冒泡以及阻止默认行为
事件冒泡 当事件发生后,这个事件就要开始传播(从里到外或者从外向里).为什么要传播呢?因为事件源本身(可能)并没有处理事件的能力,即处理事件的函数(方法)并未绑定在该事件源上.例如我们点击一个按钮时, ...
- jQuery中的事件冒泡
1.什么是冒泡 eg: <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <he ...
- 阻止JS事件冒泡传递（cancelBubble 、stopPropagation）
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm1.aspx. ...
- JavaScript--阻止事件冒泡stopPropagation和cancelBubble
<!DOCTYPE html> <html lang="en" xmlns="http://www.w3.org/1999/html"> ...
- 阻止事件冒泡，阻止默认事件，event.stopPropagation()和event.preventDefault()，return fal的区别
今天来看看前端的冒泡和事件默认事件如何处理 1.event.stopPropagation()方法 这是阻止事件的冒泡方法,不让事件向documen上蔓延,但是默认事件任然会执行,当你掉用这个方法的时 ...
- JS 之 阻止事件冒泡，阻止默认事件，event.stopPropagation()和event.preventDefault()，return false的区别
在前端开发中,有时我们需要阻止冒泡和阻止默认事件的发生. 一.event.stopPropagation() 阻止事件的冒泡,不让事件向documen上蔓延,但是默认事件任然会执行,当调用这个方法的时 ...
随机推荐
- c/c++生成预编译文件
Preprocesses C and C++ source files and writes the preprocessed output to a file. /P Remarks The f ...
- JavaWeb之动态页面技术JSP/EL/JSTL
一.JSP技术 1．jsp脚本和注释 jsp脚本: 1)<%java代码%> ----- 内部的java代码翻译到service方法的内部 2)<%=java变量或表达式> - ...
- Windows下安装zip包解压版mysql
Windows下安装zip包解压版mysql 虽然官方提供了非常好的安装文件,但是有的时候不想每次再重装系统之后都要安装一遍MySQL,需要使用zip包版本的MySQL.在安装时需如下三步: 1. 新 ...
- sass编译命令
sass编译一个文件的方式 sass xx.scss:xx.css 这种方式只能编译一次,要是想一直监控编译,只要有保存更改就会立即编译,那么就需要下面这条命令了 sass --watch xx.sc ...
- TypeScript完全解读(26课时)_18.Mixins混入
本节的代码在mixin.ts文件内 同时在index.ts内引入 混入就是把两个对象或者类的内容混合到一起,从而实现一些功能复用. 对象混入 js中对象的混入 先来看一个js中对象的混入的例子 首先定 ...
- Identity Server 4 原理和实战（完结）_Implicit Flow 实例
oidc-client.js貌似是IdentityServer4的团队开发的 服务端的设置 在服务端新增一个Client 之后需要在angular客户端页建两个页面,对应这两个url才行 登出之后要跳 ...
- 如何在.net项目中使用全局程序集GAC
在解决已有.net网站问题过程中(之前的同事写的),发现出现dll不存在的情况,build报错 在bin目录下找不到该dll,后来发现是全局程序集,存储在C:\Windows\assembly目录下 ...
- lightoj 1076 【二分找满足条件的最左】
#include <bits/stdc++.h> using namespace std; typedef long long LL; typedef unsigned long long ...
- assembly x86(nasm)修改后的日常
data segment ENG db 'SUNdayS Coming I Wanna Drive My Car,SUN,SUN$' ;9,3 sun1 db 'SUN' swcount db 0ah ...
- 51Nod 1097 拼成最小的数（字符串的排序）
#include <iostream> #include <cstring> #include <cstdlib> #include <cstdio> ...