下拉列表框，鼠标点击文本框，出现下拉，鼠标(离开的时候或者点击网页其他位置时)下拉列表消失。鼠标放到下拉列表的某一项上变背景色，点击下拉列表的某一项将该项的值显示在文本框内，然后下拉列表消失。

<!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——菜单下拉列表练习(阻止事件冒泡)的更多相关文章

  1. javascript阻止事件冒泡的兼容写法及其相关示例

    //阻止事件冒泡的兼容写法 function stopBubble(e){ //如果提供了事件对象,则是一个非IE浏览器 if(e && e.stopPropagation) //因此 ...

  2. JavaScript 阻止事件冒泡的实现方法

    JavaScript 阻止事件冒泡,无使用其它插件来辅助,原生JS代码,考虑到浏览器的兼容性问题,这里对IE/火狐.Operating以及Chrome都有针对性的判断,代码如下: function c ...

  3. JavaScript阻止事件冒泡（兼容IE、Chrome、FF）

    这里仅仅是一个简单代码demo,因为时间问题并未做深入研究,因为今天做项目时要用到阻止事件冒泡的内容,找了好多才找到一个可以使用的,特记录之. <!DOCTYPE HTML> <ht ...

  4. JavaScript事件冒泡机制和阻止事件冒泡及默认事件

    一.阻止事件冒泡: 1.html中加return false 2.js中加return false 3.IE下:window.event.cancelBubble = true:  FF下:event ...

  5. javascript 阻止事件冒泡 cancelBubble

    javascript简单的阻止事件冒泡,可以使用事件的cancelBubble方法为true: html部分 <button id="btn1">点击显示div< ...

  6. javascript - 事件详解（阻止事件冒泡+阻止事件行为）

    一.事件流 1.事件流 描述的是在页面中接受事件的顺序 2.事件冒泡 由最具体的元素接收,然后逐级向上传播至最不具体的元素的节点 (最具体 –> 最不具体) 3.事件捕获 最不具体的节点先接收事 ...

  7. javascript阻止事件冒泡和浏览器的默认行为

    1.阻止事件冒泡,使成为捕获型事件触发机制. 1 function stopBubble(e) { 2 //如果提供了事件对象,则这是一个非IE浏览器 3 if ( e && e.st ...

  8. javascript里阻止事件冒泡

    如下图所示,灰色块包含红色块,假设我们为灰色和红色块各绑定一个单击弹框事件,当我们点击红色块时,不希望触发灰色块的弹框事件,这就需要阻止冒泡事件了. IE里阻止冒泡事件使用cancelBubble属性 ...

  9. javascript 阻止事件冒泡和阻止默认事件对比

    公司项目有像上图中效果的功能需求这也是很常见功能很简单功能,通过一个小例子和大家聊聊js的事件冒泡和默认事件. 先说说一般的实现方式即使用阻止事件冒泡的方式去做,给input绑定一个click事件(并 ...

随机推荐

  1. C程序设计语言(K&R)笔记

    1.表达式中float类型的操作数不会自动转换为double类型.一般来说,数学函数(如math.h)使用双精度类型的变量.使用float类型主要是为了在使用较大数组时节省存储空间,有时也为了节省机器 ...

  2. ARM9嵌入式学习笔记（2）-Vi使用

    ARM9嵌入式学习笔记(2) 实验1-1-3 Vi使用 vi创建文件vi hello.c:vi smb.conf-打开文件smb.conf i键-插入模式:esc键-命令行模式::-底行模式: 底行模 ...

  3. ECSHOP首页站内快讯在哪里添加和修改？

    “添加新闻后在首页站内快讯处显示不出来?”.“请问首页中站内快讯(最新文章)在后台哪个位置管理”.“如何让发布的文章进入首页站内快讯”等等诸如此类的问题,经常在论坛里看到一些朋友在询问. 本ECSHO ...

  4. iOS开发那些事儿（一）轮播器

    前言 市面上绝大部分的APP被打开之后映入眼帘的都是一个美轮美奂的轮播器,所以能做出一个符合需求.高效的轮播器成为了一个程序员的必备技能.所以今天的这篇博客就来谈谈轮播器这个看似简单的控件其中蕴含的道 ...

  5. yum添加源。

    本文以centos 7为准.其他版本的linux可能存在一些偏差. 第一:索引文件. 1)repo文件. 1.repo文件是指以repo为结尾的文件.是 仓库源的索引文件.将其添加到yum的repo仓 ...

  6. mysql+php+pdo批量添加大数据

    1.使用insert into插入 ini_set('max_execution_time','0');//限制超时时间,因为第一种时间较长,索性设为0不限制 $pdo = new PDO(" ...

  7. Redis 作为缓存服务器的配置

    随着redis的发展,越来越多的架构用它取代了memcached作为缓存服务器的角色,它有几个很突出的特点:1. 除了Hash,还提供了Sorted Set, List等数据结构2. 可以持久化到磁盘 ...

  8. AngularJS如何使用ngRepeat过滤排序

    NG重复指令,带过滤器,像这样: <li ng-repeat="item in items | orderBy:'order_prop' | filter:query | limitT ...

  9. Python 自学笔记（一）环境搭建

    一,关于Python的介绍 关于Python的介绍,我不想多说了,网上随便一搜,很多介绍,这里我主要写下我的自学Python的 过程,也是为了促进我能继续学习下去. 二,环境搭建 1,这里我只讲解Wi ...

  10. SQL Server 解决CPU 高占用的一般step

    第一步: 看这些CPU是不是SQL Server用的. 第二步: 确定SQL Server 有没有引发17883\17884错误 第三步: 找出使用CPU最高的语句进行优化.(sys.dm_exec_ ...