js进阶 12-15 jquery如何实现点击button显示列表，点击其它位置隐藏列表
js进阶 12-15 jquery如何实现点击button显示列表，点击其它位置隐藏列表
一、总结
一句话总结：在button中阻止事件冒泡。
1、如何咋button中阻止事件冒泡（两种方法）？
event.stopPropagation()和return false
31 $("#btn").click(function(){
32 // alert('#btn')
33 $('ul').show()
34 //event.stopPropagation()
35 return false
36 })
return false不仅阻止冒泡，还阻止默认事件执行
2、下拉列表如何实现？
button+li列表，button控制li列表显示隐藏
10 *{padding: 0;margin: 0}
11 #btn{width:200px;height: 24px;line-height: 24px;text-align: center; }
12 ul{
13 width: 198px;list-style-type: none;border:1px solid;
14 display: none;
15 }
22 <input type="button" id="btn" value="选择城市">
23 <ul>
24 <li>北京</li>
25 <li>天津</li>
26 <li>上海</li>
27 <li>广州</li>
28 <li>......</li>
29 </ul>
3、document代表的区域是哪个（为什么很多事件都监听document）？
浏览器除上面菜单栏都是document。因为元素都放在这个区域，故监听document，那么这个区域的所有的东西都能被监听。
4、页面有一个button按钮，你同时给button和document添加点击事件，那么你点击button，document里面的事件会执行么？
因为事件冒泡，肯定会执行
5、事件对象e和event什么时候使用？
本事件中使用event，要传递事件对象参数的时候使用e
31 $("#btn").click(function(){
32 // alert('#btn')
33 $('ul').show()
34 //event.stopPropagation()
35 return false
36 })
25 $('#txt1').keydown(function(e){
26 if (e.which==13&&e.ctrlKey) {
27 var str1=$('#txt1').val()
28 var str2=$('#txt2').val()
29 str2+=str1+'\n'
30 $('#txt2').val(str2)
31 $('#txt1').val('')
32 }
33 })
二、jquery如何实现点击button显示列表，点击其它位置隐藏列表
1、相关知识
案例描述：点击选择城市按钮之后自动弹出一个内容选择页面，点击其他任意地方，该页面关闭。
案例重点：该案例非常简单，重点在于通过这个小例子加深对事件冒泡，阻止冒泡的理解。
2、代码
<!DOCTYPE html>
<html lang="en">
<style>
</style>
<head>
<meta charset="UTF-8">
<title>演示文档</title>
<script type="text/javascript" src="jquery-3.1.1.min.js"></script>
<style type="text/css">
*{padding: 0;margin: 0}
#btn{width:200px;height: 24px;line-height: 24px;text-align: center; }
ul{
width: 198px;list-style-type: none;border:1px solid;
display: none;
}
body{margin: 50px} </style>
</style>
</head>
<body>
<input type="button" id="btn" value="选择城市">
<ul>
<li>北京</li>
<li>天津</li>
<li>上海</li>
<li>广州</li>
<li>......</li>
</ul>
<script>
$("#btn").click(function(){
// alert('#btn')
$('ul').show()
//event.stopPropagation()
return false
})
$(document).click(function(){
// alert('document')
$('ul').hide()
})
</script>
</body>
</html>
js进阶 12-15 jquery如何实现点击button显示列表，点击其它位置隐藏列表的更多相关文章
- js进阶 12 jquery事件汇总
js进阶 12 jquery事件汇总 一.常用事件 页面载入事件 ready() 文档就绪事件(当 HTML 文档就绪可用时) 鼠标事件 click() 触发.或将函数绑定到指定元素的 click 事 ...
- js进阶正则表达式15验证身份证号（|符号的使用：var reg=/^\d{17}[\d|X]$|^\d{15}$/）（str的方法substr）
js进阶正则表达式15验证身份证号(|符号的使用:var reg=/^\d{17}[\d|X]$|^\d{15}$/)(str的方法substr) 一.总结 1.|符号的使用:var reg=/^\d ...
- js进阶---12-11、jquery如何给动态创建出来的元素绑定事件
js进阶---12-11.jquery如何给动态创建出来的元素绑定事件 一.总结 一句话总结:通过事件委托的方式,通过on方法 1.on方法在事件绑定的时候,data方式带额外参数时,字符串参数和其它 ...
- js进阶---12-12、jquery事件委托怎么使用
js进阶---12-12.jquery事件委托怎么使用 一.总结 一句话总结:通过on方法(事件委托),给要绑定事件的元素的祖先绑定事件,从而达到效果. 1.事件委托是什么? 通过事件冒泡,让子元素绑 ...
- js进阶---12-10、jquery绑定事件和解绑事件是什么
js进阶---12-10.jquery绑定事件和解绑事件是什么 一.总结 一句话总结:on和off. 1.jquery如何给元素绑定事件? on方法 22 $('#btn1').on('click', ...
- js进阶 13-9/10 jquery如何实现三级列表
js进阶 13-9/10 jquery如何实现三级列表 一.总结 一句话总结:用的是定位,父标签相对定位,子标签就可以绝对定位了,绝对定位的孩子还是可以设置绝对定位.用toggle设置子菜单显示和隐藏 ...
- js进阶课程 12-9 jquery的事件对象event的方法有哪些？
js进阶课程 12-9 jquery的事件对象event的方法有哪些? 一.总结 一句话总结:三组六个,阻止默认事件一组,阻止冒泡一组,阻止冒泡和剩余事件一组. 1.事件的默认动作指什么? 比如点a标 ...
- js进阶 11-4/5 jquery中css的类的操作有哪些
js进阶 11-4/5 jquery中css的类的操作有哪些 一.总结 一句话总结:jquery中css的类的操作有增删切三种. 1.jquery中css的类的操作有哪些? 增删切三种 addCla ...
- js进阶 13-11/12 jquery如何实现折叠导航
js进阶 13-11/12 jquery如何实现折叠导航 一.总结 一句话总结:还是用的slideToggle滑动效果,并且这一个展开时,所有兄弟都关闭. 1.文字缩进怎么设置? 感觉设置margin ...
随机推荐
- QTP校验数据库中数据后台项目
数据校验功能后台主要包含两个类:QTPCommonServlet.java和QTPCommonDao.java 当中QTPCommonServlet.java为: package com.runqia ...
- es62
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- WinForm无边框窗体移动方法
C#WinForm无边框窗体移动方法.模仿鼠标单击标题栏移动窗体位置 这里介绍俩种办法 方法一:直接通过修改窗体位置从而达到移动窗体的效果 方法二:直接伪装发送单击任务栏消息,让应用程序误以为单击任务 ...
- python 时间库的用法 时区的转化
1. 月份的加减 https://blog.csdn.net/qq_18863573/article/details/79444094 第三方模块:python-dateutil import dat ...
- matplotlib散点图笔记
定义: 由一组不连续的点完成的图形 散点图: 包含正相关性,负相关性和不相关性. 散点图生成函数: plt.scatter(x,y) 演示代码如下: import numpy as np import ...
- 编程算法 - 水洼的数量 代码(C)
水洼的数量 代码(C) 本文地址: http://blog.csdn.net/caroline_wendy 题目: 有一个大小为N*M的园子, 雨后起了积水. 八连通的积水被觉得是连接在一起的. 请求 ...
- javascript创建对象的方法--原型模式
javascript创建对象的方法--原型模式 一.总结 1.原型模式解决内存浪费的方法(继承):通过继承,对象继承原型模式下的所有属性,对象不同于其它对象的的属性自己创建或者修改 2.原型的使用(p ...
- Linux下读写芯片的I2C寄存器
要想在Linux下读写芯片的I2C寄存器,一般需要在Linux编写一份该芯片的I2C驱动,关于Linux下如何编写I2C驱动,前一篇文章<手把手教你写Linux I2C设备驱动>已经做了初 ...
- mysql 造1亿条记录的单表--大数据表
读写文件 背景及木:现有数据1000w单表,为压力测试准备1亿条数据. 步骤: 1.将1000w条记录,除id外都导入到多个文件中: //DELIMITER DROP PROCEDURE if EXI ...
- 洛谷P1734 最大约数和
题目描述 选取和不超过S的若干个不同的正整数,使得所有数的约数(不含它本身)之和最大. 输入输出格式 输入格式: 输入一个正整数S. 输出格式: 输出最大的约数之和. 输入输出样例 输入样例#1: 复 ...