js阻止冒泡和默认事件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>阻止冒泡和默认事件</title>
</head>
<body> <button>阻止冒泡和默认事件</button> <script>
function stopPropagation(e) {
if (e && e.stopPropagation) {
console.log(1);
e.stopPropagation();//阻止冒泡非ie8及以下版本 } else {
console.log(2);
window.event.cancelBubble = true;//阻止冒泡ieie8及以下版本
} if (e && e.preventDefault ) {
console.log(3);
e.preventDefault();//阻止默认非ie8及以下版本 } else {
console.log(4);
window.event.returnValue = false;//阻止默认ie8及以下版本
} } var btn=document.getElementsByTagName("button")[0];
btn.onclick= function (e) {
alert(111);
stopPropagation(e);
};
document.onclick= function () {
alert(222);
} //移动端禁止页面下拉 document.addEventListener('touchmove', function (e) { e.preventDefault(); }, false);
</script> </body> </html>
js阻止冒泡和默认事件的更多相关文章
- js阻止冒泡和默认事件(默认行为)详解- jquery DefaultPrevented 函数
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> & ...
- js阻止元素的默认事件与冒泡事件
嵌套的div元素,如果父级和子元素都绑定了一些事件,那么在点击最内层子元素时可能会触发父级元素的事件,从而带来一定的影响. 1. event.preventDefault(); -- 阻止元素的默认 ...
- jQuery 阻止冒泡和默认事件
jQuery event.preventDefault() 方法 event.preventDefault() 方法阻止元素发生默认的行为. 例如: 当点击提交按钮时阻止对表单的提交 阻止以下 URL ...
- 基本event封装:阻止冒泡、默认事件等
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> </head> ...
- js阻止a标签默认事件的几种方法
方法/步骤 疑问 打开编辑器,新建html并加入a标签,如图所示,小编想点击a标签时执行pop函数同时禁止a标签的默认的href跳转,该如何阻止呢? 方法一 要阻止a标签跳转,可以改变href ...
- js阻止冒泡及jquery阻止事件冒泡示例介绍
js阻止冒泡 在阻止冒泡的过程中,W3C和IE采用的不同的方法,那么我们必须做以下兼容. 复制代码 代码如下: function stopPro(evt){ var e = evt || window ...
- JS点击子元素不触发父元素点击事件(js阻止冒泡)
js阻止冒泡 <html> <title></title> <head> <meta charset="utf-8"> ...
- 前端(十五)—— JavaScript事件:绑定事件方式、事件的冒泡和默认事件、鼠标事件、键盘事件、表单 事件、文档事件、图片事件、页面事件
JS事件:绑定事件方式.事件的冒泡和默认事件.鼠标事件.键盘事件.表单 事件.文档事件.图片事件.页面事件 一.事件的两种绑定方式 1.on事件绑定方式 document.onclick = func ...
- js阻止冒泡
js阻止冒泡 (ev || event).cancelBubble = true; 标签切换 <script type="text/javascript"> windo ...
随机推荐
- 暑假集训test-8-26
真 noip模拟题 但是被我做得稀巴烂 新高二除了林巨做得勉强能看,其他人都做得稀巴烂 老张都要绝望了 t1.水呀水 题如其名是道水题.新建个点代表水源,跑最小生成树即可. //Achen #incl ...
- day 86 Vue学习之八geetest滑动验证
Vue学习之八geetest滑动验证 本节目录 一 geetest前端web中使用 二 xxx 三 xxx 四 xxx 五 xxx 六 xxx 七 xxx 八 xxx 一 geetest前端web ...
- springboot跨域访问
写一个WebMvc配置类重写addCorsMappings即可 @Configuration public class MyMvcConfig implements WebMvcConfigurer ...
- 2018-2-13-安装visualStudio-出现-cant-install-Microsoft.TeamFoundation.OfficeIntegration.Resources...
title author date CreateTime categories 安装visualStudio 出现 cant install Microsoft.TeamFoundation.Offi ...
- linux 2.6 内核的移植
内核移植过程 下载 linux 内核 从 http://www.kernel.org/pub/linux/kernel/v2.6/linux2.6.14.1.tar.bz2 下载 linux2 ...
- 认识DOM 文档对象模型DOM(Document Object Model)定义访问和处理HTML文档的标准方法。元素、属性和文本的树结构(节点树)。
认识DOM 文档对象模型DOM(Document Object Model)定义访问和处理HTML文档的标准方法.DOM 将HTML文档呈现为带有元素.属性和文本的树结构(节点树). 先来看看下面代码 ...
- 转:浅析C++中的this指针
原文出处:http://blog.csdn.net/starlee/article/details/2062586 有下面的一个简单的类: class CNullPointCall { public: ...
- AutoIt自动化编程(2)【转】
注意:窗口标题和窗口文本参数总是对大小写敏感的. 1.等待窗口系列命令/函数 AHK和AU3都提供了用法类似的一组窗口等待命令/函数:WinWait/WinWaitActive/WinWaitClos ...
- 简单搭建 @vue-cli3.0 及常用sass使用
1,在安装了Node.js后使用其中自带的包管理工具npm.或者使用淘宝镜像cnpm(这里不做说明) 1-1,下载vue3.0脚手架(如果之前装vue-cli3x之前的版本,先卸载 npm unins ...
- leetcode-95-不同的二叉搜索树②*
题目描述: 方法一:递归 # Definition for a binary tree node. # class TreeNode: # def __init__(self, x): # self. ...