<!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阻止冒泡和默认事件的更多相关文章

  1. js阻止冒泡和默认事件(默认行为)详解- jquery DefaultPrevented 函数

    <!DOCTYPE html> <html>     <head>     <meta charset="UTF-8">     & ...

  2. js阻止元素的默认事件与冒泡事件

    嵌套的div元素,如果父级和子元素都绑定了一些事件,那么在点击最内层子元素时可能会触发父级元素的事件,从而带来一定的影响. 1. event.preventDefault();  -- 阻止元素的默认 ...

  3. jQuery 阻止冒泡和默认事件

    jQuery event.preventDefault() 方法 event.preventDefault() 方法阻止元素发生默认的行为. 例如: 当点击提交按钮时阻止对表单的提交 阻止以下 URL ...

  4. 基本event封装:阻止冒泡、默认事件等

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> </head> ...

  5. js阻止a标签默认事件的几种方法

    方法/步骤    疑问 打开编辑器,新建html并加入a标签,如图所示,小编想点击a标签时执行pop函数同时禁止a标签的默认的href跳转,该如何阻止呢?  方法一 要阻止a标签跳转,可以改变href ...

  6. js阻止冒泡及jquery阻止事件冒泡示例介绍

    js阻止冒泡 在阻止冒泡的过程中,W3C和IE采用的不同的方法,那么我们必须做以下兼容. 复制代码 代码如下: function stopPro(evt){ var e = evt || window ...

  7. JS点击子元素不触发父元素点击事件(js阻止冒泡)

    js阻止冒泡 <html> <title></title> <head> <meta charset="utf-8"> ...

  8. 前端(十五)—— JavaScript事件:绑定事件方式、事件的冒泡和默认事件、鼠标事件、键盘事件、表单 事件、文档事件、图片事件、页面事件

    JS事件:绑定事件方式.事件的冒泡和默认事件.鼠标事件.键盘事件.表单 事件.文档事件.图片事件.页面事件 一.事件的两种绑定方式 1.on事件绑定方式 document.onclick = func ...

  9. js阻止冒泡

    js阻止冒泡 (ev || event).cancelBubble = true; 标签切换 <script type="text/javascript"> windo ...

随机推荐

  1. 免费带你体验阿里巴巴旗舰大数据计算产品MaxCompute

    什么是MaxCompute? 众所周知,MaxCompute是阿里云推出的承载EB级的数据存储能力,百PB级的单日计算能力,公共云覆盖国内外十几个国家和地区,专有云包含城市大脑在内部署超过100+套的 ...

  2. 0919CSP-S模拟测试赛后总结

    60分-rank36,不出所料又炸了. 总是试图稳住成绩,但就是不能避免这样的大起伏.这样不行啊. T1可是道sb题啊……对着题干yy了一个多小时,正解基本都想到了,只差一个结构体排序. 然而即使我真 ...

  3. 使用C++网络库libcurl

    libcurl使用问题记录 libcurl库的初始化和关闭 curl_global_init()和curl_global_cleanup().这两个函数并不是线程安全的.所以只能在主线程中进行一次的初 ...

  4. 面试系列 30 如何自己设计一个类似dubbo的rpc框架

    其实一般问到你这问题,你起码不能认怂,因为既然咱们这个课程是短期的面试突击训练课程,那我不可能给你深入讲解什么kafka源码剖析,dubbo源码剖析,何况我就算讲了,你要真的消化理解和吸收,起码个把月 ...

  5. 语音识别(语音转文字)&& 语音合成(文字转语音)

    [语音合成API]SpeechSynthesisUtterance是HTML5中新增的API,用于将指定文字合成为对应的语音.也包含一些配置项,指定如何去阅读(语言,音量,音调)等 // 语音播报 s ...

  6. Activiti添加批注(comment)信息

    在每次提交任务的时候需要描述一些批注信息,例如:请假流程提交的时候要描述信息为什么请假,如果领导驳回可以批注驳回原因等 1.添加批注 // 由于流程用户上下文对象是线程独立的,所以要在需要的位置设置, ...

  7. 打开新窗口(window.open) open() 方法可以查找一个已经存在或者新建的浏览器窗口。 语法: window.open([URL], [窗口名称], [参数字符串])

    打开新窗口(window.open) open() 方法可以查找一个已经存在或者新建的浏览器窗口. 语法: window.open([URL], [窗口名称], [参数字符串]) 参数说明: URL: ...

  8. 在vue项目中使用Nprogress.js进度条

    NProgress是一款在网页顶部添加细长进度条的工具,非常轻巧,使用起来也非常便捷,灵感来源于Google, YouTube. 1.安装 $ npm install --save nprogress ...

  9. SG函数模板(洛谷2197nim游戏

    #include <iostream> #include <cstdio> #include <queue> #include <algorithm> ...

  10. vim的个性化配置(方便编程)

    在用户主目录下新建vimrc即可.例如: vim ~/.vimrc 然后复制进去即可.   配置如下: "关闭vim一致性原则 set nocompatible "显示行号 set ...