js解决select下拉选不中问题


Posted in Javascript onOctober 14, 2014

当事件mouseover中出现select下拉框时,select下拉是选不中的,解决办法:

var o = e.relatedTarget || e.toElement;//判断下移动到的对象,移动到option上ie下是null,firefox等为undefined。。
if (!o) return;//为option退出不隐藏

完整代码案例为:

<!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">
*{margin:0;padding:0;list-style:none;border:0;}
.pop_blue{ position:absolute; cursor:pointer; padding:10px;}
.pop_blue span{ display:inline-block; width:24px; height:32px; background: url(../images/pop_blue.png) no-repeat;}

.map_xf .rud1{width:210px; position:absolute;border:1px solid #ddd; display:none; background-color:#fff;padding:17px 25px;}
.map_xf .rud1 li{margin:0 0 8px;}
.map_xf .rud1 input,.map_xf .rud1 select{height:22px;}
</style>
<script type="text/javascript" src="jquery-1.9.1.min.js"></script>
<script type="text/javascript">
$(function(){
$('.pop_blue').hover(
function(){
$(this).find('.rud1').show();
$(this).css("z-index","9999");
},
function(e){
var o = e.relatedTarget || e.toElement;//判断下移动到的对象,移动到option上ie下是null,firefox等为undefined。。
if (!o) return;//为option退出不隐藏

$(this).find('.rud1').hide();
$(this).css("z-index","0");
}
)
})
</script>
</head>

<body>
<div style="position:relative;width:100px;height:100px">
<div class="pop_blue" style="top:0px; left:0;"> <span>鼠标移上</span><i></i>
<div class="rud1 font12" style="top:10px;left:40px; display:none;padding:50px;background:blue;">
<ul>
<li>
<select class="w100" id="dan">
<option value="选择单元" selected="">选择单元</option>
<option value="选择单元" selected="">选择单元1</option>
<option value="选择单元" selected="">选择单元2</option>
<option value="选择单元" selected="">选择单元3</option>
<option value="选择单元" selected="">选择单元4</option>
</select>
</li>
</ul>
</div>
</div>
</div>
</body>
</html>

js解决select下拉选不中问题
当鼠标移上时就不会出现选不中select的情况了。

Javascript 相关文章推荐
基于jquery的finkyUI插件与Ajax实现页面数据加载功能
Dec 03 Javascript
Ext中下拉列表ComboBox组件store数据格式用法介绍
Jul 15 Javascript
javascript打印输出json实例
Nov 11 Javascript
jQuery选择器源码解读(一):Sizzle方法
Mar 31 Javascript
在JavaScript的正则表达式中使用exec()方法
Jun 16 Javascript
优化RequireJS项目的相关技巧总结
Jul 01 Javascript
用js实现放大镜的效果的简单实例
May 23 Javascript
Javascript将双字节字符转换成单字节字符并计算长度
Jun 22 Javascript
js removeChild 方法深入理解
Aug 16 Javascript
vue.js之vue-cli脚手架的搭建详解
May 05 Javascript
Vue.js 2.5新特性介绍(推荐)
Oct 24 Javascript
Vue+webpack实现懒加载过程解析
Feb 17 Javascript
基于js与flash实现的网站flv视频播放插件代码
Oct 14 #Javascript
两种方法基于jQuery实现IE浏览器兼容placeholder效果
Oct 14 #Javascript
网站基于flash实现的Banner图切换效果代码
Oct 14 #Javascript
jQuery 实现自动填充邮箱功能(带下拉提示)
Oct 14 #Javascript
js网页右下角提示框实例
Oct 14 #Javascript
兼容主流浏览器的jQuery+CSS 实现遮罩层的简单代码
Oct 14 #Javascript
从数据库读取数据后将其输出成html标签的三种方法
Oct 13 #Javascript
You might like
PHP的引用详解
2015/02/22 PHP
yii2 开发api接口时优雅的处理全局异常的方法
2019/05/14 PHP
setTimeout和setInterval的浏览器兼容性分析
2007/02/27 Javascript
JavaScript使用技巧精萃[代码非常实用]
2008/11/21 Javascript
基于jQuery实现点击同时更改两个iframe的网址
2010/07/01 Javascript
深入理解javascript学习笔记(一) 编写高质量代码
2012/08/09 Javascript
javascript简单事件处理和with用法介绍
2013/09/16 Javascript
JS动态改变表格边框宽度的方法
2015/03/31 Javascript
jQuery实现简单二级下拉菜单
2015/04/12 Javascript
javascript self对象使用详解
2016/10/18 Javascript
JavaScript 详解预编译原理
2017/01/22 Javascript
使用React手写一个对话框或模态框的方法示例
2019/04/25 Javascript
微信小程序页面传多个参数跳转页面的实现方法
2019/05/17 Javascript
vue cli4.0项目引入typescript的方法
2020/07/17 Javascript
Vue中的nextTick作用和几个简单的使用场景
2021/01/25 Vue.js
[45:59]完美世界DOTA2联赛PWL S2 FTD vs GXR 第二场 11.22
2020/11/24 DOTA
举例讲解Python中装饰器的用法
2015/04/27 Python
浅谈pyhton学习中出现的各种问题(新手必看)
2017/05/17 Python
python的dataframe和matrix的互换方法
2018/04/11 Python
Python File(文件) 方法整理
2019/02/18 Python
不到40行代码用Python实现一个简单的推荐系统
2019/05/10 Python
Python列表与元组的异同详解
2019/07/02 Python
python动态进度条的实现代码
2019/07/03 Python
在Django下创建项目以及设置settings.py教程
2019/12/03 Python
Python实现ElGamal加密算法的示例代码
2020/06/19 Python
利用python汇总统计多张Excel
2020/09/22 Python
荷兰本土平价百货:HEMA
2017/10/23 全球购物
神话般的珠宝:Ross-Simons
2020/07/13 全球购物
俄罗斯苹果优质经销商商店:iPort
2020/05/27 全球购物
C#如何允许一个类被继承但是避免这个类的方法被重载?
2015/02/24 面试题
Linux面试题LINUX系统类
2015/11/25 面试题
感恩老师的演讲稿
2014/05/06 职场文书
司法助理专业自荐书
2014/06/13 职场文书
秦始皇兵马俑导游词
2015/02/02 职场文书
挂职个人工作总结
2015/03/05 职场文书
Python数据分析入门之教你怎么搭建环境
2021/05/13 Python