JAVAscript——菜单下拉列表练习(阻止事件冒泡)
下拉列表框，鼠标点击文本框，出现下拉，鼠标(离开的时候或者点击网页其他位置时)下拉列表消失。鼠标放到下拉列表的某一项上变背景色，点击下拉列表的某一项将该项的值显示在文本框内，然后下拉列表消失。
<!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>
JAVAscript——菜单下拉列表练习(阻止事件冒泡)的更多相关文章
- javascript阻止事件冒泡的兼容写法及其相关示例
//阻止事件冒泡的兼容写法 function stopBubble(e){ //如果提供了事件对象,则是一个非IE浏览器 if(e && e.stopPropagation) //因此 ...
- JavaScript 阻止事件冒泡的实现方法
JavaScript 阻止事件冒泡,无使用其它插件来辅助,原生JS代码,考虑到浏览器的兼容性问题,这里对IE/火狐.Operating以及Chrome都有针对性的判断,代码如下: function c ...
- JavaScript阻止事件冒泡（兼容IE、Chrome、FF）
这里仅仅是一个简单代码demo,因为时间问题并未做深入研究,因为今天做项目时要用到阻止事件冒泡的内容,找了好多才找到一个可以使用的,特记录之. <!DOCTYPE HTML> <ht ...
- JavaScript事件冒泡机制和阻止事件冒泡及默认事件
一.阻止事件冒泡: 1.html中加return false 2.js中加return false 3.IE下:window.event.cancelBubble = true: FF下:event ...
- javascript 阻止事件冒泡 cancelBubble
javascript简单的阻止事件冒泡,可以使用事件的cancelBubble方法为true: html部分 <button id="btn1">点击显示div< ...
- javascript - 事件详解（阻止事件冒泡+阻止事件行为）
一.事件流 1.事件流 描述的是在页面中接受事件的顺序 2.事件冒泡 由最具体的元素接收,然后逐级向上传播至最不具体的元素的节点 (最具体 –> 最不具体) 3.事件捕获 最不具体的节点先接收事 ...
- javascript阻止事件冒泡和浏览器的默认行为
1.阻止事件冒泡,使成为捕获型事件触发机制. 1 function stopBubble(e) { 2 //如果提供了事件对象,则这是一个非IE浏览器 3 if ( e && e.st ...
- javascript里阻止事件冒泡
如下图所示,灰色块包含红色块,假设我们为灰色和红色块各绑定一个单击弹框事件,当我们点击红色块时,不希望触发灰色块的弹框事件,这就需要阻止冒泡事件了. IE里阻止冒泡事件使用cancelBubble属性 ...
- javascript 阻止事件冒泡和阻止默认事件对比
公司项目有像上图中效果的功能需求这也是很常见功能很简单功能,通过一个小例子和大家聊聊js的事件冒泡和默认事件. 先说说一般的实现方式即使用阻止事件冒泡的方式去做,给input绑定一个click事件(并 ...
随机推荐
- 说说ShellExecuteEx
今天来说说ShellExecuteEx这个函数,先翻译MSDN,然后看个样例. ShellExecuteEx Function 对指定应用程序运行某个操作 语法: BOOL ShellExecuteE ...
- 安装Php时候报错信息：virtual memory exhausted: Cannot allocate memory （不能分配内存）
原因是fileinfo这个函数在编译时非常消耗内存,而系统内存又不够了,所以才会出现此问题. 网上找了方法: 1,关闭其他占用大内存的进程. 2,在编译是添加参数 --disable-fileinfo
- 《JavaScript 闯关记》之正则表达式
由于本课程的核心是 JavaScript,所以本文着重讲解了「正则表达式」在 JavaScript 中的用法,并未深入「正则表达式」的具体细节.如果您尚不了解「正则表达式」,强烈推荐您先学习 正则表达 ...
- cover letter issues
All cover letters should: Explain why you are sending a resume. Don't send a resume without a cover ...
- 工具使用 eclipse the user operation is waiting for Building Working to be completed。
问题定位: 在使用 IDE开发时,学习一个新事物如语言,框架,出现错误时暂时无法判断是新写的代码错还是IDE使用错: 则编写简单的未使用该技术的test.java ,运行后还有异常出现,则不是代码问题 ...
- Debian 使用杂记（一）
前几天又冲动的把系统换成Linux了,最开始接触Linux是2010年,那时候买了个本本,预装的是ubuntu8.10,自此知道除了windows原来还有其它操作系统. 不记得什么时候开始知道ubun ...
- CDZSC_2015寒假新人（1）——基础 d
Description These days, I am thinking about a question, how can I get a problem as easy as A+B? It i ...
- 在Struts2中使用poi进行excel操作下载的时候报getOutputStream() has already been called for this response 错误 [转]
在项目中用到了poi这个开源的操作excel文件的jar. 项目中用到struts2容器管理servlet.不是单纯的直接用servlet. workbook.write(os); ...
- ORACLE集合常用方法
集合方法pl/sql预定义了在varray 和嵌套表实例上进行调用的方法.这些方法能在集合上执行一定的功能. EXISTS 该函数返回集合中第一个元素的索引,如果集合为空,返回NULL Collect ...
- Python成长之路第二篇（1）_数据类型内置函数用法
数据类型内置函数用法int 关于内置方法是非常的多这里呢做了一下总结 (1)__abs__(...)返回x的绝对值 #返回x的绝对值!!!都是双下划线 x.__abs__() <==> a ...