Javascript和jquery事件--阻止事件冒泡和阻止默认事件
阻止冒泡和阻止默认事件—js和jq相同,jq的event是一个全局的变量
我们写代码的时候常用的都是事件冒泡,但是有的时候我们并不需要触发父元素的事件,而浏览器也有自己的默认行为(表单提交、超链接跳转等)。
- 点击按钮子元素的时候不希望触发父元素的点击事件。
- 之前提到的mouseout事件。
- 在大部分元素上滚动鼠标滑轮都会触发body的界面滑动(如果界面有滚动条)
- 在有滚动条的元素中滚动不会触发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事件--阻止事件冒泡和阻止默认事件的更多相关文章
- JS如果阻止事件冒泡和浏览器默认事件
原地址:http://missra.com/article/web-57.html 嵌套的标签元素,如果父元素和子元素都绑定了一些事件,那么在点击最内层子元素时可能会触发父级元素的事件,下面介绍一下J ...
- 滚轮事件的防冒泡、阻止默认行为的代码(效果是:只让当前div滚动,连当前文档都不滚动的效果)
//用firefox变量表示火狐代理var firefox = navigator.userAgent.indexOf('Firefox') != -1;function MouseWheel(e){ ...
- js阻止浏览器、元素的默认事件与js阻止事件冒泡、阻止事件流
嵌套的div元素,如果父级和子元素都绑定了一些事件,那么在点击最内层子元素时可能会触发父级元素的事件,下面介绍一下js阻止默认事件与js阻止事件冒泡示例,大家参考使用吧 1. event.prev ...
- javascript(九)事件冒泡 onmouseenter onmouseenter 默认事件 和 键盘事件
1 事件冒泡 子元素触发的事件,会往上(父元素)传递: 例子: <div id="box"> <p></p> </div> < ...
- 整理之DOM事件阶段、冒泡与捕获、事件委托、ie事件和dom模型事件、鼠标事件
整理之DOM事件阶段 本文主要解决的问题: 事件流 DOM事件流的三个阶段 先理解流的概念 在现今的JavaScript中随处可见.比如说React中的单向数据流,Node中的流,又或是今天本文所讲的 ...
- JS事件——禁止事件冒泡和禁止默认事件
Event 对象 Event 对象代表事件的状态,比如事件在其中发生的元素.键盘按键的状态.鼠标的位置.鼠标按钮的状态. 事件通常与函数结合使用,函数不会在事件发生前被执行! 一.什么是事件冒泡 在一 ...
- vue事件对象、冒泡、阻止默认行为
事件对象: <input type="button" name="" value="按钮" @click="show($ev ...
- JS阻止冒泡和取消默认事件(默认行为)
本文链接:http://caibaojian.com/javascript-stoppropagation-preventdefault.html 阻止事件冒泡 function(e){ if( e ...
- jquery 阻止冒泡事件和阻止默认事件
jQuery 冒泡和默认事件: <!DOCTYPE html> <html lang="en"> <head> <meta charset ...
- jQuery阻止冒泡和HTML默认操作
1:jQuery是一个快捷简便的JavaScript框架,说道框架可以直接理解为就是对原来底层的东西进行了封装使得开发者能够利用这个框架快速开发. 2:在当今的各个浏览器中都支持事件的冒泡,所谓的冒泡 ...
随机推荐
- 学一下gconv, gprof等知识
scons.gcc.gdb.valgrind.gcov SCons 是一个用 Python 语言编写的类似于 make 工具的程序.与 make 工具相比较,SCons 的配置文件更加简单清晰明了. ...
- UI标签库专题九:JEECG智能开发平台 Choose(选则操作标签)
1. Choose(选则操作标签) 1.1. 參数 属性名 类型 描写叙述 是否必须 默认值 hiddenName string 隐藏域的ID 否 null hiddenid string 隐藏 ...
- 【java】itoo项目实战之大数据查询之使用 new map 优化hibernate之级联查询
在我的上一篇博客<[java]itoo项目实战之hibernate 懒载入优化性能>中,我曾提到过学生数据有2万条,查询数据十分的慢,这是让人非常受不了的事情.看着页面进度条一直转着圈圈, ...
- 修正EasyUI的BUG——Form中存在FileBox时的数据载入错误
使用EasyUI载入服务端返回的数据时经常使用 $('#fm').form('load', row); 实现,既方便又简洁,可是.当Form中包括有FileBox时,代码就会报错,经过跟踪发现.由于E ...
- idle-实现清屏
最近在学习python的时候,需要用到ubuntu的python idle.这个工具可以测试python语法.但是呢,在使用的过程中遇到了一个问题.就是随着你的输入,你会发现这个输入会停留在这个界面的 ...
- vue UI 框架
(1)Element 饿了么 vue 2.0后台UI框架 (Star:18382) https://github.com/ElemeFE/element (1-1)Vuetify 最新的ui 框架 ...
- XHTML是什么?XHTML与HTML的区别
经常看到web前端开发人员口中提到XHTML,相信很多web前端开发的新手们感到很疑惑,甚至有些时候认为XHTML就是HTML,这个观点是错误的,今天零度就给大家好好说道说道XHTML和HTML的区别 ...
- 搭建 Docker 环境
- java(内部类)
内部类: 一个类定义在另外一个类的内部就称作为内部类. 内部类的类别: 1.成员内部类: 2.局部内部类: 1.成员内部类: 成员内部类的访问方式: 方式一:在成员内部类的外侧提供一个方法创建内部类的 ...
- 图片上传5-多个图片上传,独立项目Demo和源码
图片上传,一次性可以上传多个图片,每个图片可以有名字.URL.排序.备注等字段.这是区别于使用百度WebUploader等多图上传工具的地方. 项目相关图片 Jar包管理:Maven用到的框架:Spr ...