锋利的jQuery-4--阻止事件冒泡和阻止默认行为
阻止事件冒泡:
如果嵌套元素分别有自己的click事件,当点击内层元素时外层元素的事件也会被触发。
$("span").bind("click", function(event){
//代码
event.stopPropagation(); //通过bind创建的事件对象event来执行
} );
阻止默认行为:
网页中的默认行为,例如链接跳转和form提交,可以通过preventDefault()方法来阻止。
$("#submit").bind("click", function(event){
var username = $("#username").val();
if(username == ""){
event.preventDefault(); //阻止表单的默认提交行为
}
});
注意:如果想同时对事件对象停止冒泡和默认行为,可以在事件处理中返回false;这是在事件对象上同时调用stopPrapagation()和preventDefault()事件的简写。在上边的两个例子中,也可以把对应的方法改为return false;
锋利的jQuery-4--阻止事件冒泡和阻止默认行为的更多相关文章
- 阻止事件冒泡,阻止默认事件,event.stopPropagation()和event.preventDefault(),return fal的区别
今天来看看前端的冒泡和事件默认事件如何处理 1.event.stopPropagation()方法 这是阻止事件的冒泡方法,不让事件向documen上蔓延,但是默认事件任然会执行,当你掉用这个方法的时 ...
- 阻止事件冒泡,阻止默认事件,event.stopPropagation()和event.preventDefault(),return false的区别
1.event.stopPropagation()方法 这是阻止事件的冒泡方法,不让事件向documen上蔓延,但是默认事件任然会执行,当你掉用这个方法的时候,如果点击一个连接,这个连接仍然会被打开, ...
- js中阻止事件冒泡和浏览器默认行为
在使用javascript编程时会遇到一个问题,就是当你给html添加事件时,由于浏览器默认的为冒泡型事件触发机制,所以会触发你不想触发的事件.那么通过如下的函数可以解决这个问题.[兼容IE和FF] ...
- js事件冒泡、阻止事件冒泡以及阻止默认行为
事件冒泡 当事件发生后,这个事件就要开始传播(从里到外或者从外向里).为什么要传播呢?因为事件源本身(可能)并没有处理事件的能力,即处理事件的函数(方法)并未绑定在该事件源上.例如我们点击一个按钮时, ...
- JS如果阻止事件冒泡和浏览器默认事件
原地址:http://missra.com/article/web-57.html 嵌套的标签元素,如果父元素和子元素都绑定了一些事件,那么在点击最内层子元素时可能会触发父级元素的事件,下面介绍一下J ...
- javascript 阻止事件冒泡和阻止默认事件对比
公司项目有像上图中效果的功能需求这也是很常见功能很简单功能,通过一个小例子和大家聊聊js的事件冒泡和默认事件. 先说说一般的实现方式即使用阻止事件冒泡的方式去做,给input绑定一个click事件(并 ...
- JS 之 阻止事件冒泡,阻止默认事件,event.stopPropagation()和event.preventDefault(),return false的区别
在前端开发中,有时我们需要阻止冒泡和阻止默认事件的发生. 一.event.stopPropagation() 阻止事件的冒泡,不让事件向documen上蔓延,但是默认事件任然会执行,当调用这个方法的时 ...
- js阻止浏览器、元素的默认事件与js阻止事件冒泡、阻止事件流
嵌套的div元素,如果父级和子元素都绑定了一些事件,那么在点击最内层子元素时可能会触发父级元素的事件,下面介绍一下js阻止默认事件与js阻止事件冒泡示例,大家参考使用吧 1. event.prev ...
- js阻止事件冒泡和标签默认行为
////阻止事件冒泡函数和 // 阻止默认浏览器动作(W3C) 要一起使用效果好<a href="/Scripts/newfiber_js_lib/images/1.jpg" ...
- jQuery 中的事件冒泡和阻止默认行为
1.事件冒泡 <%@ page language="java" import="java.util.*" pageEncoding="utf-8 ...
随机推荐
- P2P NAT检测和穿越方式
一. NAT类型 本文转自:http://www.cnblogs.com/hummersofdie/archive/2013/05/21/3090163.html 1.基本的NAT类型:只 ...
- GEOS库在windows中的编译和测试(vs2012)
版本:vs2012, geos3.5 一.下载和编译 这类的文章比较,不再具体细说,可以参考 http://blog.csdn.net/wangqinghao/article/details/8201 ...
- 从0开始学java——Tomcat的安装及其常见错误排查(zz)
来源: <http://www.cnblogs.com/xdp-gacl/p/3729033.html> 学习web开发,为什么必须要先装一个WEB服务器? 在本地计算机上随便创建一个we ...
- 信息安全系统设计基础exp_5
北京电子科技学院(BESTI) 实 验 报 告 课程:信息安全系统设计基础 班级:1353 姓名:郑伟.吴子怡 学号:20135322.20135313 指导教师: 娄嘉鹏 实验 ...
- 关于 iOS 10 中 ATS / HTTPS /2017 问题
本文于 2016 年 11 月 28 日按照 Apple 最新的文档和 Xcode 8 中的表现进行了部分更新. WWDC 15 提出的 ATS (App Transport Security) 是 ...
- php中的错误级别
在php编程过程中,大家一定会遇到或多或少的错误提醒,也正是这些错误提示,指引我们编写更加干净的代码,今天先写出我们主要列出的错误类型,先挖坑,写关于php错误与异常的相关知识,慢慢填坑. De ...
- (旧)子数涵数·PS——冷色调与LOMO
一.准备素材(我是从百度图库里下载的) 二.打开PS和素材 三.复制图层,快捷键Ctrl+J,并把原图层隐藏,只在副本上编辑(好习惯) 四.使用"匹配颜色"命令,增加"明 ...
- css的垂直居中
请先看博客:http://www.jb51.net/css/39629.html
- Pell方程及其一般形式
一.Pell方程 形如x^2-dy^2=1的不定方程叫做Pell方程,其中d为正整数,则易得当d是完全平方数的时候这方程无正整数解,所以下面讨论d不是完全平方数的情况. 设Pell方程的最小正整数解为 ...
- redis学习笔记——(1)
1. NoSQL&Redis介绍 NoSQL,Not Only SQL,是非关系型的数据库.传统的关系数据库不能满足超大规模和高并发的应用. 是以Key-Value的形式存储,(例如JSON, ...