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. cocos2d-x的声音控制

    声音控制SimpleAudioEngine是单例.下面是其方法. [cpp] view plaincopy //获得SimpleAudioEngine的实例 static SimpleAudioEng ...

  2. Qwt库的一个使用注意事项

    作者:朱金灿 来源:http://blog.csdn.net/clever101 一般debug版本的程序链接release版本的库是没有问题的.今天使用debug版本程序链接release版本的qw ...

  3. 虚拟机中试用windows 8(视频)

    虚拟机中试用windows 8(视频) VM7装windows 8基本没戏,建议用正式版vmware8.0,还有Oracle的Virtualbox 也没问题http://www.virtualbox. ...

  4. javafx KeyCombination

    import javafx.application.Application; import javafx.application.Platform; import javafx.event.Actio ...

  5. gpasswd---指定要管理的工作组，及更改密码

    gpasswd 命令详解 gpasswd命令是Linux下工作组文件/etc/group和/etc/gshadow的管理工具,用于指定要管理的工作组. 2.选项详解: -a : 添加用户到组 -d : ...

  6. 如何优雅的写UI——（5）选项卡功能实现

    先在我们的选项卡可以说能用了,每个标签页都能点进去,但是这还远远没到能用的地步,比如说你把窗口最大化后. 立马就露出马脚了,所以这篇我们要先讲讲tabctrl的最基本的功能实现 改变选项卡大小 上图的 ...

  7. Vue 学习记录<2>

    一.Vue https://vue-loader.vuejs.org/zh-cn/ https://vuejs-templates.github.io/webpack/structure.html

  8. 【Android个人理解（八）】跨应用调用不同组件的方法

    如果情景: 创建两个应用appA和appB,appA包括一个Service,此Service有一个堵塞方法每隔10秒钟产生一个随机数字,例如以下: public int getRandomInt(){ ...

  9. 经验之谈—让你看明确block

    事实上我感觉不常常使用block的朋友.对block应该是比較陌生的,那么如今我们来扒开block的真面目,看看block的本质 普通的局部变量.block内部仅仅会引用它初始的值(block定义那一 ...

  10. google 分屏 横屏模式 按home键界面错乱故障分析（二） 分屏的启动过程

    google 进入分屏后在横屏模式按home键界面错乱(二) 你确定你了解分屏的整个流程? imageMogr2/auto-orient/strip%7CimageView2/2/w/1240&quo ...