阻止冒泡和阻止默认事件—js和jq相同,jq的event是一个全局的变量

我们写代码的时候常用的都是事件冒泡,但是有的时候我们并不需要触发父元素的事件,而浏览器也有自己的默认行为(表单提交、超链接跳转等)。

  1. 点击按钮子元素的时候不希望触发父元素的点击事件。
  2. 之前提到的mouseout事件。
  3. 在大部分元素上滚动鼠标滑轮都会触发body的界面滑动(如果界面有滚动条)
  4. 在有滚动条的元素中滚动不会触发body界面的滑动,但是滑条滑到底部或者顶部并继续滑动的时候会触发父元素乃至body整体的界面滑动。

其中,1、2涉及的是事件的冒泡,3、4涉及的则是事件的默认事件。

在jq中使用的是(其中的event是一个全局变量,也许?我并没有定义它,而是直接拿来用的):

event.stopPropagation();//阻止冒泡

event.preventDefault();//阻止默认行为

在js中:

function clickfunction(e){

var event = e||window.event;//兼容

event.stopPropagation();//阻止冒泡

event.preventDefault();//阻止默认行为

}

可以看出只是event的获取方式不同。

---------------------------------------------------------------------------------------------------------------------------

补充一点,我似乎忘了它的兼容写法

阻止浏览器默认行为兼容性写法

event.preventDefault ? event.preventDefault() : (event.returnValue = false);

阻止冒泡写法

event.stopPropagation ? event.stopPropagation() : (event.cancelBubble = true);

Javascript和jquery事件--阻止事件冒泡和阻止默认事件的更多相关文章

  1. JS如果阻止事件冒泡和浏览器默认事件

    原地址:http://missra.com/article/web-57.html 嵌套的标签元素,如果父元素和子元素都绑定了一些事件,那么在点击最内层子元素时可能会触发父级元素的事件,下面介绍一下J ...

  2. 滚轮事件的防冒泡、阻止默认行为的代码(效果是:只让当前div滚动,连当前文档都不滚动的效果)

    //用firefox变量表示火狐代理var firefox = navigator.userAgent.indexOf('Firefox') != -1;function MouseWheel(e){ ...

  3. js阻止浏览器、元素的默认事件与js阻止事件冒泡、阻止事件流

    嵌套的div元素,如果父级和子元素都绑定了一些事件,那么在点击最内层子元素时可能会触发父级元素的事件,下面介绍一下js阻止默认事件与js阻止事件冒泡示例,大家参考使用吧   1. event.prev ...

  4. javascript(九)事件冒泡 onmouseenter onmouseenter 默认事件 和 键盘事件

    1 事件冒泡 子元素触发的事件,会往上(父元素)传递: 例子: <div id="box"> <p></p> </div> < ...

  5. 整理之DOM事件阶段、冒泡与捕获、事件委托、ie事件和dom模型事件、鼠标事件

    整理之DOM事件阶段 本文主要解决的问题: 事件流 DOM事件流的三个阶段 先理解流的概念 在现今的JavaScript中随处可见.比如说React中的单向数据流,Node中的流,又或是今天本文所讲的 ...

  6. JS事件——禁止事件冒泡和禁止默认事件

    Event 对象 Event 对象代表事件的状态,比如事件在其中发生的元素.键盘按键的状态.鼠标的位置.鼠标按钮的状态. 事件通常与函数结合使用,函数不会在事件发生前被执行! 一.什么是事件冒泡 在一 ...

  7. vue事件对象、冒泡、阻止默认行为

    事件对象: <input type="button" name="" value="按钮" @click="show($ev ...

  8. JS阻止冒泡和取消默认事件(默认行为)

    本文链接:http://caibaojian.com/javascript-stoppropagation-preventdefault.html 阻止事件冒泡 function(e){ if( e ...

  9. jquery 阻止冒泡事件和阻止默认事件

    jQuery 冒泡和默认事件: <!DOCTYPE html> <html lang="en"> <head> <meta charset ...

  10. jQuery阻止冒泡和HTML默认操作

    1:jQuery是一个快捷简便的JavaScript框架,说道框架可以直接理解为就是对原来底层的东西进行了封装使得开发者能够利用这个框架快速开发. 2:在当今的各个浏览器中都支持事件的冒泡,所谓的冒泡 ...

随机推荐

  1. 00076_BigDecimal

    1.在程序中执行下列代码,会出现什么问题? System.out.println(0.09 + 0.01); System.out.println(1.0 - 0.32); System.out.pr ...

  2. 洛谷 P1683 入门

    P1683 入门 题目描述 不是任何人都可以进入桃花岛的,黄药师最讨厌象郭靖一样呆头呆脑的人.所以,他在桃花岛的唯一入口处修了一条小路,这条小路全部用正方形瓷砖铺设而成.有的瓷砖可以踩,我们认为是安全 ...

  3. jquery16 DOM操作 : 添加 删除 获取 包装 DOM筛选

    <!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content ...

  4. amaze ui和bootstrap有哪些差别?

    amaze ui和bootstrap有哪些差别? 问题 我最近在学amaze ui,感觉如果单从功能性来看和bootstrap最大差别也就是扁平化,不过妹子ui号称对国产本土化支持更好,这个具体表现在 ...

  5. 洛谷P1720 月落乌啼算钱

    目背景 (本道题目木有以藏歌曲……不用猜了……) <爱与愁的故事第一弹·heartache>最终章. 吃完pizza,月落乌啼知道超出自己的预算了.为了不在爱与愁大神面前献丑,只好还是硬着 ...

  6. JS实现下拉菜单的功能

    <!DOCTYPE html> <html> <head> <meta charset = "utf8"> <title> ...

  7. ZJOI2008骑士

    Z国的骑士团是一个很有势力的组织,帮会中汇聚了来自各地的精英.他们劫富济贫,惩恶扬善,受到社会各界的赞扬. 最近发生了一件可怕的事情,邪恶的Y国发动了一场针对Z国的侵略战争.战火绵延五百里,在和平环境 ...

  8. java移位操作符注意的问题

    如果对char,byte或者short类型的数值进行移位处理,那么在移位进行之前,他们会被转为int类型, 并且所得到的结果也是一个int型. 若对long类型的数值进行处理所得到的结果也是long. ...

  9. Spark MLlib架构解析(含分类算法、回归算法、聚类算法和协同过滤)

    Spark MLlib架构解析 MLlib的底层基础解析 MLlib的算法库分析 分类算法 回归算法 聚类算法 协同过滤 MLlib的实用程序分析 从架构图可以看出MLlib主要包含三个部分: 底层基 ...

  10. Day2二分图笔记

    定义 左边一堆点 右边一堆点 树是一个二分图,奇数深度和偶数深度可以组成二分图, 二分图匹配 左边的点和右边的点有边 匈牙利算法 可能的答案 ans,n-ans,m-ans,n+m-ans  ||   ...