JAVAscript——菜单下拉列表练习(阻止事件冒泡)

时间：2022-08-29 23:05:46

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

<!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 - 事件详解（阻止事件冒泡&plus;阻止事件行为）

    一.事件流 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. 改变按钮在iPhone下的默认风格

    -webkit-appearance: none; "来改变按钮在iPhone下的默认风格,其实我们可以反过来思路,使用"appearance"属性,来改变任何元素的浏览 ...

  2. js024-最佳实践

    js024-最佳实践 本章内容: 可维护的代码 保证代码性能 部署代码 24.1 可维护性 24.1.1 代码的可维护性 代码可维护性的特征: 特性 说明 可理解性 其他人可以理解它的用途和一般途径 ...

  3. 基于IHttpAsyncHandler的实时大文件传送器

    在日常工作中,有时候需要到远程服务器上部署新版本的系统,由于远程服务器出于外网,所以每次都要开QQ连接,非常麻烦.索性就研究了下IHttpasyncHandler,并结合Juqery Progress ...

  4. System&period;Web&period;Mvc&period;Html 命名空间小计&lpar;转&rpar;

    最近在看MVC框架,发现这个博文对初学者可能有帮助,故转之. 1,Html.Action    使用指定参数调用指定子操作方法并以 HTML 字符串形式返回结果. Html.Action() < ...

  5. UNIX网络编程——利用ARP和ICMP协议解释ping命令

    一.MTU 以太网和IEEE 802.3对数据帧的长度都有限制,其最大值分别是1500和1492字节,将这个限制称作最大传输单元(MTU,Maximum Transmission Unit)      ...

  6. 安装Redis 编译make gcc&colon; error trying to exec &&num;39&semi;cc1&&num;39&semi;&colon; execvp&colon; 没有该文件或目录的错误

    Linux(Redhat) make: gcc: error trying to exec 'cc1': execvp: 没有该文件或目录的错误 排查错误: 1.检查gcc.gcc-c++是否安装rp ...

  7. jmeter之regular expression extractor ，并循环调用匹配到的多个值

    jmeter之regular expression extractor 官方介绍:http://jmeter.apache.org/usermanual/regular_expressions.htm ...

  8. 添加并删除Marker

    var data=new Array(); // 定位.显示内容 function setLocation(x,y,name,time,speed,direction,GPSstatus,carsta ...

  9. python&lowbar;day10

    目录: 并发多线程 协程 I/O多路复用(未完成,待续) 一.并发多线程 1.线程简述: 一条流水线的执行过程是一个线程,一条流水线必须属于一个车间,一个车间的运行过程就是一个进程(一个进程内至少一个 ...

  10. C&plus;&plus;基础知识：动态类型识别

    1.动态类型指的是基类指针所指向的对象的实际类型 2.C++中的多态根据实际的对象类型调用对应的虚函数(1)可以在基类中定义虚函数返回具体的类型信息(2)所有的派生类都必须实现类型相关的虚函数(3)每 ...

相关文章