JS-事件之鼠标、键盘都能控制的下拉选框效果
<script type="text/javascript">
window.onload=function(e){
var box=document.getElementById('divselect'),
title=box.getElementsByTagName('cite')[0],
menu=box.getElementsByTagName('ul')[0],
as=box.getElementsByTagName('a'),//as是一个集合
index=-1; // 点击三角时
title.onclick=function(event){
event = event || window.event;
if(event.stopPropagation){
event.stopPropagation();
}else{
event.cancelBubble = true;
};//以上是阻止冒泡的判断语句
menu.style.display = "block"; //添加键盘事件
//问题出在按了回车之后,怎么把对应的分类内容填进去。
document.onkeyup = function(event){
event = event || window.event;
// console.log(event.keyCode)//用这个方法获取到:回车是13,空格是32,上键是38,下键是40;
/***********
if(event.keyCode===32){
alert('kg');
}else if(event.keyCode===13){
//看来必须要是三个等号才会成立。
alert('hc');
}
********/
if(event.keyCode===40){
index++;
if(index > as.length-1){
index = 0
};
for(var i=0;i<as.length;i++){
as[i].style.backgroundColor = null;
};
as[index].style.backgroundColor = "#ccc";
};
if(event.keyCode===38){
index--;
if(index<0){
index = as.length-1;
}
for(var i=0;i<as.length;i++){
as[i].style.backgroundColor = null;
};
as[index].style.backgroundColor = "#ccc";
}
if(event.keyCode===13){
for(var i=0;i<as.length;i++){
as[i].style.backgroundColor = null;
};
title.innerHTML = as[index].innerHTML;
menu.style.display = "none";
}
};
};
//封装-命名函数
// var overColor = function(){
// this.style.backgroundColor = "#ccc";
// }
// function outColor(){
// this.style.backgroundColor = null;
// }
// function replaceInner(){
// title.innerHTML = this.innerHTML;
// menu.style.display = "none";
// }
// 滑过滑过、离开、点击每个选项时
for(var i=0;i<as.length;i++){
// as[i].onmouseover = overColor;
// as[i].onmouseout = outColor;
// as[i].onclick = replaceInner;
//写法2——直接调用
as[i].onmouseover = function(){
this.style.backgroundColor = "#ccc";
};
as[i].onmouseout = function(){
this.style.backgroundColor = null;
};
as[i].onclick = function(){
title.innerHTML = this.innerHTML;
menu.style.display = "none";
};
};//当实在找不到错误的时候,看看是不是不小心删掉了花括号啥的
// 点击页面空白处时
document.addEventListener('click',function(){
//注意区分:attachEvent(ie中添加事件监听器的方法)和addEventListener(通用浏览器中添加事件监听器)。别搞混了写成attachEventListener了!!
menu.style.display = "none";
},false); }
</script>
<div id="divselect">
<cite>请选择分类</cite>
<ul>
<li id="li"><a href="javascript:;" selectid="1">ASP开发</a></li>
<li><a href="javascript:;" selectid="2">.NET开发</a></li>
<li><a href="javascript:;" selectid="3">PHP开发</a></li>
<li><a href="javascript:;" selectid="4">Javascript开发</a></li>
<li><a href="javascript:;" selectid="5">Java特效</a></li>
</ul>
</div>
html
<style type="text/css">
body,ul,li{ margin:; padding:; font-size:13px;}
ul,li{list-style:none;}
#divselect{width:186px; margin:80px auto; position:relative; z-index:;}
#divselect cite{width:150px; height:24px;line-height:24px; display:block; color:#807a62; cursor:pointer;font-style:normal;
padding-left:4px; padding-right:30px; border:1px solid #333333;
background:url(xjt.png) no-repeat right center;}
#divselect ul{width:184px;border:1px solid #333333; background-color:#ffffff; position:absolute; z-index:; margin-top:-1px; display:none;}
#divselect ul li{height:24px; line-height:24px;}
#divselect ul li a{display:block; height:24px; color:#333333; text-decoration:none; padding-left:10px; padding-right:10px;}
</style>
任务
一、 点击菜单中的向下三角展开菜单
提示:
1、点击三角时需阻止事件冒泡
二、 展开菜单之后,在document对象上绑定keyup事件,(键盘事件不是某个具体的对象了,所以要帮到document上面来)按下向下方向键,选中下一个选项,按下向上方向键,选中上一个选项,按下回车键菜单收起,显示选中项
提示:
1、 声明一个全局的index变量初值为-1
2、 按下向下方向键时index递增,当递增至大于等于菜单选项的总数时恢复为0
3、 按下向上方向键时判断index,如若小于等于0则设为菜单选项的总数,之后递减index
4、 根据index值将对应的选项设为当前(灰色背景)
5、 按下回车键时将对应选中的选项设为菜单标题,且将所有选项设为无背景,index恢复为-1,菜单收起
注意:没有任何选项被选中时,按下回车键不做任何操作
三、鼠标滑过每个选项时高亮显示,离开时去掉背景,点击高亮选项时菜单标题改变
提示:
1.遍历所有a标签,绑定鼠标点击的事件
注意:要考虑到浏览器兼容,使用innerHTML,不要使用innerText
四、点击页面空白处收起菜单
提示:
1.绑定在document对象上
慕课练习题:http://www.imooc.com/code/3631
JS-事件之鼠标、键盘都能控制的下拉选框效果的更多相关文章
- iview 表单验证 input 用失去焦点事件 blur, select下拉选框 要用change事件 验证
birthday: [{ required: true, message: '内容不能为空', trigger: 'blur' }],belongDept: [{ required: true, me ...
- 在Ueditor的内容区添加一个下拉选框改变事件
<script>html='';html=html+` <select name="" onchange='this.appendChild(document.g ...
- [js开源组件开发]模拟下拉选项框select
模拟下拉选项框select 在css3流行的情况下,下拉框还是无法满足PD的需求,所以有了autosearch,有了模拟下拉框.效果如下图: select DEMO请案例点击这里查看.http://w ...
- 可控制导航下拉方向的jQuery下拉菜单代码
效果:http://hovertree.com/texiao/nav/1/ 代码如下: <!DOCTYPE html> <html> <head> <meta ...
- jquery.chosen.js下拉选择框美化插件项目实例
由于之前使用的bootstrap-select插件是建立在bootstrap基础上的,实际使用到项目中的时候,与我们使用的ace-admin(基于bootstrap)存在样式冲突,导致下拉框的样式发生 ...
- js 三大事件(鼠标.键盘.浏览器)
鼠标事件: click:单击 dblclick:双击 mousedown:鼠标按下 mouseup:鼠标抬起 mouseover:鼠标悬浮(进入) mouseout:鼠标离开(离开) mousemov ...
- WPF进阶技巧和实战09-事件(1-路由事件、鼠标键盘输入)
理解路由事件 当有意义的事情发生时,有对象(WPF的元素)发送的用于通知代码的消息,就是事件的核心思想.WPF通过事件路由的概念增强了.NET事件模型.事件由允许源自某个元素的事件由另一个元素引发.例 ...
- JS事件之鼠标悬浮窗(鼠标悬浮窗抖动问题的解决)
鼠标进入显示悬浮窗,思路有简单有困难. 首先要注意的是我们要给悬浮窗设置position为absolute,不然我们改了 style.left style.top发现没有变化很尴尬.其余的内容看起来就 ...
- Java&Selenium 鼠标键盘及滚动条控制相关方法封装
一.摘要 本片博文主要展示在使用Selenium with java做web自动化时,一些不得不模拟鼠标操作.模拟键盘操作和控制滚动条的java代码 二.模拟鼠标操作 package util; im ...
随机推荐
- [BZOJ3211]花神游历各国(线段树+区间开根)
题目:http://www.lydsy.com:808/JudgeOnline/problem.php?id=3211 分析: 区间开根是没法区间合并的. 但是注意到10^9开根开个5次就变成1了…… ...
- 数学符号“s.t.”的意义
在优化问题的求解中,如线性规划.非线性规划问题等,经常会遇到数学符号“s.t.”,它的意思是什么呢? “s.t.”,指 subject to,受限制于.... 例如: 目标函数:min {x+2} 约 ...
- 跨浏览器事件EventUtil
<div style="width: 150px; height: 150px; padding: 25px; border:1px solid blue; " id=&qu ...
- Intel系列CPU的流水线技术的发展
Intel系列CPU的流水线技术的发展 CPU(Central processing Unit),又称“微处理器(Microprocessor)”,是现代计算机的核心部件.对于PC而言,CPU的规格与 ...
- Windows配置mycat
MyCat使用Mysql的通讯协议模拟成一个MySQl服务器,并建立了完整的Schema(数据库).Table(数据表).User(用户)的逻辑模型,并将这套逻辑模型映射到后端的存储节点DataNod ...
- 【BZOJ 1043】【HNOI 2008】下落的圆盘 判断圆相交+线段覆盖
计算几何真的好暴力啊. #include<cmath> #include<cstdio> #include<cstring> #include<algorit ...
- 关于php插件pdo_mysql的安装
今天在做一个商城的连接的时候,需要MpDO验证.需要安装pdo_mysql模块,刚开始按照php扩展模块的安装按照这个安装ZIP,curl都成功了但是安装pdo_mysql却不行,在./configu ...
- 【ASP.NET Identity系列教程(三)】Identity高级技术
注:本文是[ASP.NET Identity系列教程]的第三篇.本系列教程详细.完整.深入地介绍了微软的ASP.NET Identity技术,描述了如何运用ASP.NET Identity实现应用程序 ...
- Extjs-Ext.Ajax.request设置超时
ExtJs的Ajax提交主要是:Ext.Ajax.request或form1.getForm().submit,超时时间默认是30秒. 很多时候,后台处理比较多,往往需要超出30秒的限制.此时,可以通 ...
- Mysql-windows下修改密码
忘记密码修改(以下各种方法视情况而使用,本人测试,有些都是案情况才可行,但都是有设置成功过) 注:修改密码成功后一定要记得刷新下权限(否则将导致不能使用当前用户连接) mysql>FLUSH P ...