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显示列表，点击其它位置隐藏列表的更多相关文章

  1. js进阶 12 jquery事件汇总

    js进阶 12 jquery事件汇总 一.常用事件 页面载入事件 ready() 文档就绪事件(当 HTML 文档就绪可用时) 鼠标事件 click() 触发.或将函数绑定到指定元素的 click 事 ...

  2. 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 ...

  3. js进阶---12-11、jquery如何给动态创建出来的元素绑定事件

    js进阶---12-11.jquery如何给动态创建出来的元素绑定事件 一.总结 一句话总结:通过事件委托的方式,通过on方法 1.on方法在事件绑定的时候,data方式带额外参数时,字符串参数和其它 ...

  4. js进阶---12-12、jquery事件委托怎么使用

    js进阶---12-12.jquery事件委托怎么使用 一.总结 一句话总结:通过on方法(事件委托),给要绑定事件的元素的祖先绑定事件,从而达到效果. 1.事件委托是什么? 通过事件冒泡,让子元素绑 ...

  5. js进阶---12-10、jquery绑定事件和解绑事件是什么

    js进阶---12-10.jquery绑定事件和解绑事件是什么 一.总结 一句话总结:on和off. 1.jquery如何给元素绑定事件? on方法 22 $('#btn1').on('click', ...

  6. js进阶 13-9/10 jquery如何实现三级列表

    js进阶 13-9/10 jquery如何实现三级列表 一.总结 一句话总结:用的是定位,父标签相对定位,子标签就可以绝对定位了,绝对定位的孩子还是可以设置绝对定位.用toggle设置子菜单显示和隐藏 ...

  7. js进阶课程 12-9 jquery的事件对象event的方法有哪些？

    js进阶课程 12-9 jquery的事件对象event的方法有哪些? 一.总结 一句话总结:三组六个,阻止默认事件一组,阻止冒泡一组,阻止冒泡和剩余事件一组. 1.事件的默认动作指什么? 比如点a标 ...

  8. js进阶 11-4/5 jquery中css的类的操作有哪些

    js进阶 11-4/5  jquery中css的类的操作有哪些 一.总结 一句话总结:jquery中css的类的操作有增删切三种. 1.jquery中css的类的操作有哪些? 增删切三种 addCla ...

  9. js进阶 13-11/12 jquery如何实现折叠导航

    js进阶 13-11/12 jquery如何实现折叠导航 一.总结 一句话总结:还是用的slideToggle滑动效果,并且这一个展开时,所有兄弟都关闭. 1.文字缩进怎么设置? 感觉设置margin ...

随机推荐

  1. Android 给图片 加边框

    图片处理时,有时需要为图片加一些边框,下面介绍一种为图片添加简单边框的方法. 基本思路是:将边框图片裁剪成八张小图片(图片大小最好一致,不然后面处理会很麻烦),分别对应左上角,左边,左下角,下边,右下 ...

  2. Inception V3 的 tensorflow 实现

    tensorflow 官方给出的实现:models/inception_v3.py at master · tensorflow/models · GitHub 1. 模型结构 首先来看 Incept ...

  3. 简单理解javascript的闭包

    看过网上关于javascript的闭包的概念和分析,看完之后都是一头雾水,完全不懂,零度我本来就对于概念性的东西很烦躁,没办法,硬着头皮翻阅了很多的资料,总算理清了一点头绪,现在分享给大家,错误之处还 ...

  4. 值得学习的CSS知识

    这里零度给大家推荐几个值得学习的CSS技巧,能让你编写网页事半功倍!一.清除默认值 通常 padding 的默认值为 0,background-color 的默认值是 transparent.但是在不 ...

  5. Exercise: PCA in 2D

    Step 0: Load data The starter code contains code to load 45 2D data points. When plotted using the s ...

  6. Kinect 开发 —— Kinect for windows SDK

    开发 —— 基本的SDK和Windows 编程技巧(彩色图像视频流,深度图像视频流的采集,骨骼跟踪,音频处理,语音识别API) 深度数据,就是Kinect的精髓和灵魂,很多问题都转换为深度图像的模式识 ...

  7. NOI2017整数

    NOI2017 整数 题意: ​ 让你实现两个操作: 1 \(a\) \(b\):将\(x\)加上整数\(a \cdot 2 ^ b\),其中 \(a\)为一个整数,\(b\)为一个非负整数 2 \( ...

  8. Linux 关闭正在运行的程序---命令

    Ctrl + C 终止 Ctrl + D 退出 Ctrl + S 挂起 Ctrl + Q 解挂 Ctrl + Z 强制结束

  9. 小米开源文件管理器MiCodeFileExplorer-源码研究(2)-2个单实例工具类

    从本篇开始,讲解net.micode.fileexplorer.util工具包中的类.这个包下的类,功能也比较单一和独立.很多代码的思想和实现,可以用于JavaWeb和Android等多种环境中. 一 ...

  10. 洛谷——P2957 [USACO09OCT]谷仓里的回声Barn Echoes

    https://www.luogu.org/problem/show?pid=2957 题目描述 The cows enjoy mooing at the barn because their moo ...