jquery取消事件冒泡的三种方法展示
html代码
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>阻止冒泡</title>
<script src="C:\Users\Administrator\Desktop\jquery-3.1.1.min.js"></script>
<script type="text/javascript">
$(function(){
// 为span元素绑定click事件
$('span').bind("click",function(event){
var txt = $('#msg').html() + "<p>内层span元素被点击.<p/>";//获取html信息
$('#msg').html(txt);// 设置html信息
});
// 为div元素绑定click事件
$('#content').bind("click",function(event){
var txt = $('#msg').html() + "<p>外层div元素被点击.<p/>";
$('#msg').html(txt);
});
// 为body元素绑定click事件
$("body").bind("click",function(){
var txt = $('#msg').html() + "<p>body元素被点击.<p/>";
$('#msg').html(txt);
});
})
</script>
</head>
<body>
问题一：当我们点击“span”时会触发“div”和“body”的事件，如何只触发单一点击事件不触发到父节点点击事件呢？修改：在各点击事件结尾加上stopPropagation()会阻止触发上一节点事件;
修改如下：
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<script src="C:\Users\Administrator\Desktop\jquery-3.1.1.min.js"></script>
<script type="text/javascript">
$(function(){
// 为span元素绑定click事件
$('span').bind("click",function(event){
var txt = $('#msg').html() + "<p>内层span元素被点击.<p/>";//获取html信息
$('#msg').html(txt);// 设置html信息
event.stopPropagation()
});
// 为div元素绑定click事件
$('#content').bind("click",function(event){
var txt = $('#msg').html() + "<p>外层div元素被点击.<p/>";
$('#msg').html(txt);
event.stopPropagation()
});
// 为body元素绑定click事件
$("body").bind("click",function(){
var txt = $('#msg').html() + "<p>body元素被点击.<p/>";
$('#msg').html(txt);
});
})
</script>
</head> <body>
<div id="content"> 外层div元素 <span>内层span元素</span> 外层div元素 </div> <div id="msg"></div>
</body>
</html>
问题二：表单没有通过验证阻止表单提交，这时候可以通过设置event.preventDefault(); 阻止默认行为 ( 表单提交 )。
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<script src="C:\Users\Administrator\Desktop\jquery-3.1.1.min.js"></script> <script>
$(function(event){
$("form").submit(function(){
if($("input[name='username']").val()==''){
event.preventDefault();
$("#msg").html("<p>文本框的值不能为空.</p>");
alert("123")
}
})
}) </script>
</head> <body> <form action="www.baidu.com">
<input name="username">
<input type="submit" value="提交">
</form>
<div id="msg"></div>
</body>
</html>
第三种阻止冒泡方式 return false：实际上这个很通用但是内部是执行了 (1)event.preventDefault();
(2)event.stopPropagation();
(3)停止回调函数执行并立即返回;这三个动作我们需要根据实际情况选择阻止冒泡的方式
jquery取消事件冒泡的三种方法展示的更多相关文章
- jquery取消事件冒泡的三种方法(推荐)
1.通过返回false来取消默认的行为并阻止事件起泡. jQuery 代码: ? 1 2 3 4 5 6 7 8 9 10 11 $("form").bind( "s ...
- Html 中阻止事件冒泡的三种方法比较
A:return false --->In event handler ,prevents default behavior and event bubbing . return ...
- C#中??和？分别是什么意思？ 在ASP.NET开发中一些单词的标准缩写 C#SESSION丢失问题的解决办法 在C#中INTERFACE与ABSTRACT CLASS的区别 SQL命令语句小技巧 JQUERY判断CHECKBOX是否选中三种方法 JS中!=、==、!==、===的用法和区别 在对象比较中，对象相等和对象一致分别指的是什么？
C#中??和?分别是什么意思? 在C#中??和?分别是什么意思? 1. 可空类型修饰符(?):引用类型可以使用空引用表示一个不存在的值,而值类型通常不能表示为空.例如:string str=null; ...
- jQuery中detach&&remove&&empty三种方法的区别
jQuery中empty&&remove&&detach三种方法的区别 empty():移除指定元素内部的所有内容,但不包括它本身 remove():移除指定元素内部的 ...
- Android监听点击事件实现的三种方法
监听点击事件实现的三种方法:1.匿名内部类2.外部类3.直接实现接口 1.匿名内部类: package com.jereh.calculator; import android.content.Con ...
- jquery动态加载js三种方法实例
这里为你提供了三种动态加载js的jquery实例代码哦,由于jquery是为用户提供方便的,所以利用jquery动态加载文件只要一句话$.getScript(\"test.js\" ...
- jQuery 取消事件冒泡 阻止后续内容执行 闭包函数 (学习笔记)
1.取消事件冒泡 <title>取消事件冒泡</title> <style> div { border:solid 1px black; } </style& ...
- jquery阻止元素冒泡的两种方法
通常情况下,如果给父元素添加事件之后,子元素也会继承同样的事件,这个时候就要阻止子元素的这种行为,成为阻止冒泡,总结两种解决方法: html代码: <div id="parent&qu ...
- jquery取消事件冒泡和取消默认行为
$('button').click(functon(e){ /*code*/ e.stopPropagation();//取消事件冒泡 e.preventDefault();//取消默认行为 })
随机推荐
- Linux系统不能解析域名
问题:正在使用的Linux系统突然有一天不能解析域名gus.xxxxxxxx.com? # ping gus.xxxxxxxx.com ping: unknown host gus-xxxxxxxx. ...
- Bootstrap(9) 巨幕页头缩略图和警告框组件
一．巨幕组件巨幕组件主要是展示网站的关键性区域.//在固定的范围内,有圆角 <div class="container"> <div class="ju ...
- selenium去掉下载弹窗
from selenium import webdriver import time import urllib2 class Download(): def __init__(self): self ...
- 使用Python3.x抓取58同城（南京站）的演出票的信息
#!/usr/bin/env python #-*-coding: utf-8 -*- import re import urllib.request as request from bs4 impo ...
- org.springframework.web.util.Log4jWebConfigurer
org.springframework.web.util.Log4jWebConfigurer @Deprecated Deprecated. as of Spring 4.2.1, in favor ...
- mySLQ数据库 练习题
MySQL 练习题1 DROP TABLE IF EXISTS `liuyan`; CREATE TABLE `liuyan` ( `id` int(11) NOT NULL AUTO_INCREME ...
- python bisect 排序模块 二分查找与 bisect 模块
python 3.6.5 import bisect bisect_list=dir(bisect)print(bisect_list)bisect_list = ['__builtins__', ' ...
- python 3.6.5 hashlib 和 hmac 模块
import hashlib m=hashlib.md5()# m=hashlib.sha256() m.update('hello'.encode('utf8'))print(m.hexdigest ...
- 有关JVM处理Java数组方法的思考
在Java中,获取数组的长度和String的长度是两种不同的方法,这引起了本文作者的一番思考.本文从JVM的角度,探讨了Java数组在JVM中是什么对象,有哪些成员,以及声明方法. 作者:jarfie ...
- Quartus11中新建工程
最近在使用CycloneII的开发板,但是高版本的Quartus不支持II系列的开发,于是只能用Q11了.好久没玩FPGA了,新建工程的过程中遇到了一些问题,这里把这些问题记下了以便以后查看. Qua ...