JAVAscript——菜单下拉列表练习(阻止事件冒泡)
2015-08-05 21:34
726 查看
下拉列表框,鼠标点击文本框,出现下拉,鼠标(离开的时候或者点击网页其他位置时)下拉列表消失。鼠标放到下拉列表的某一项上变背景色,点击下拉列表的某一项将该项的值显示在文本框内,然后下拉列表消失。
阻止事件冒泡
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>无标题文档</title> <style type="text/css"> #a { width:80px; height:30px; background-color:#CFF; text-align:center; line-height:30px; vertical-align:middle; } #b { width:80px; height:180px; background-color:#CF9; text-align:center; line-height:30px; vertical-align:middle; } #b div { text-align:center; line-height:30px; vertical-align:middle; } </style> </head> <body> <div id="q" onclick="wai()"> <input id="a" value="菜单" onclick="caidan()" onmouseout="likai()"/> <div id="b" style="display:none" > <div id="c" onmouseover="over(this)" onmouseout="out(this)" onclick="dianji(this)">苹果</div> <div id="d" onmouseover="over(this)" onmouseout="out(this)" onclick="dianji(this)">梨子</div> <div id="e" onmouseover="over(this)" onmouseout="out(this)" onclick="dianji(this)">山竹</div> <div id="f" onmouseover="over(this)" onmouseout="out(this)" onclick="dianji(this)">桃子</div> <div id="g" onmouseover="over(this)" onmouseout="out(this)" onclick="dianji(this)">核桃</div> <div id="h" onmouseover="over(this)" onmouseout="out(this)" onclick="dianji(this)">香蕉</div> </div> </div> </body> <script type="text/javascript"> function caidan(b) { document.getElementById("b").style.display="block"; stopEventBubble(event); //阻止事件冒泡 } function over(t) { t.style.backgroundColor="gray"; } function out(y) { y.style.backgroundColor="#CF9"; } //传值,把下拉列表的值传到文本框中 function dianji(m) { var n=document.getElementById("a"); n.value = m.innerText; } //阻止事件冒泡函数 function stopEventBubble(event) { var e=event || window.event; if (e && e.stopPropagation) { e.stopPropagation(); } else { e.cancelBubble=true; } } //隐藏 function wai() { document.getElementById("b").style.display="none"; } </script> </html>
阻止事件冒泡
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>无标题文档</title> </head> <body> <div id="wai" style="width:100%; height:800px;" onclick="showb()" > <div id="nei" style="width:200px; height:200px; background-color:#096;" onclick="showa()"></div> <div id="aa" style="width:200px; height:200px; background-color:#C36; display:none"></div> </div> </body> <script type="text/javascript"> //显示 function showa() { document.getElementById("aa").style.display="block" stopEventBubble(event); //阻止事件冒泡 } //阻止事件冒泡函数 function stopEventBubble(event) { var e=event || window.event; if (e && e.stopPropagation) { e.stopPropagation(); } else { e.cancelBubble=true; } } //隐藏 function showb() { document.getElementById("aa").style.display="none" } </script> </html>
相关文章推荐
- brackets 禁用JSLint 使用JShint 插件和同时分屏编辑html+css+js
- 【JavaScript】Javascript全局观
- 学习JS权威指南记录
- JavaScript基础----10Javascript语法-跳转语句----break和continue区别
- JavaScript基础----09Javascript语法-循环语句while循环
- JavaScript基础----08Javascript语法-循环语句for循环
- JavaScript基础----07Javascript语法-条件语句switch
- JavaScript基础----06Javascript语法-条件语句if...else
- JavaScript基础----05Javascript语法-运算符(2)
- JavaScript基础----04Javascript语法-运算符(1)
- JavaScript基础----03Javascript基础-变量和数据类型
- JavaScript基础----02Javascript基础-语法和注释
- JavaScript基础----01Javascript基础-介绍、实现、输出
- JavaScript常用表单验证
- jstl
- 如何使用Createjs来编写HTML5游戏(三)使用EaselJS中的制作Sprite类制作
- javascript笔记09:javascript的下拉式导航菜单
- 【JavaScript】 闭包 我战战兢兢的接触了它
- 用js完成悬浮广告的完整版
- JSP传递参数到JS中的方法和问题