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. poj Transferring Sylla（怎样高速的推断一个图是否是3—连通图，求割点，割边）

    Transferring Sylla 首先.什么是k连通图? k连通图就是指至少去掉k个点使之不连通的图. 题目: 题目描写叙述的非常裸.就是给你一张图要求你推断这图是否是3-连通图. 算法分析: / ...

  2. 如何覆盖GCE的DHCP MTU选项

     如何覆盖GCE的DHCP MTU选项 在GCE上托管的Linux IPSec隧道不能打开谷歌,这与MTU有关.谷歌管理员认为"改变这个值是一件困难的事情"https://cl ...

  3. RadioButton的check改变的时候

    https://stackoverflow.com/questions/8095256/asp-net-radio-button-change You'll need to specify the a ...

  4. Linux下MySQL允许远程连接以及授权命令

    --针对某个库做授权 GRANT ALL PRIVILEGES ON *.* TO 'myuser'@'%' IDENTIFIED BY 'mypassword' WITH GRANT OPTION; ...

  5. 【Django】AJAX

    目录 JSON 序列化 stringify 反序列化 parse JSON与XML对比 AJAX简介 AJAX常见应用场景 jQuery实现AJAX JS实现AJAX AJAX请求设置csrf_tok ...

  6. UVa 11743 - Credit Check

    题目:推断卡号是否合法,给你4组4位的数字.偶数位的2倍的位和加上奇数位的和,推断尾数是否为0. 分析:简单题,模拟. 直接依照提议推断就可以. 说明:460题,加油! #include <io ...

  7. 安装 VNC 和 XRDP

    安装 VNC 和 XRDPapt-get install vnc4server tightvncserver xrdp fluxbox xtermcat >vncstop.sh << ...

  8. 7lession-基础数据使用介绍

    1.数值 这个使用比较简单 a = 1 b = 3.2 c = 12.5+4j d = 20L 2.字符串 代码 s = "hello world,i am comming" pr ...

  9. SQL中实现千分位的语句

    传递一个sql的小知识,现成的语句,在工作流的表单域中很实用. 数字或字符串转成千分位 ) 字符串转换成数值 )

  10. Linux 常用解压缩归档命令

    linux 常见压缩.归档工具 创建压缩工具 压缩工具 后缀 描述 compress/uncompress .Z 早期工具,现在不常见了 gzip/gunzip .gz 进几年比较火的工具 bzip2 ...