IE中鼠标经过option触发mouseout的解决方法

本文实例讲述了IE中鼠标经过option触发mouseout的解决方法。分享给大家供大家参考。具体分析如下：

要实现的功能：

有一个DIV，当鼠标经过时此DIV完全展开，当鼠标移开时DIV收缩回去，其中DIV里面有一个select选择框；

操作select的时候在IE中会出现一个问题，当鼠标经过option时，DIV会收缩回去，而在其他浏览器中无此现象。

解决的方法：

在IE中，当鼠标移到option时 window.event.toElement 的值为null，在其他浏览器中的值为object；

当鼠标直接从DIV中移出时 window.event.toElement 的值为object，其他浏览器也是；

综上，可以在mouseout中添加下面代码即可解决问题：

if (window.event.toElement == null) return;

希望本文所述对大家的javascript程序设计有所帮助。

赞 (0)

相关推荐

  • onmouseover和onmouseout的一些问题思考

    onmouseover和onmouseout的一些问题思考

    一个DIV层,当鼠标移进的时候会触发onmouseover,移出的时候会触发onmouseout.  很简单的逻辑,这也是我们想要的!但随之烦恼也就来了:onmouseover并不会只在移进时才触发,onmouseout也不会只在移出时才触发!鼠标在DIV里面移动时也会可能触发onmouseover或onmouseout.  在上图中,对于'A'来说:当鼠标进入'A'(路径'1′)时那么就会触发'A'的onmouseover事件:接着鼠标移动到'B'(路径'2′),此时'A'会触发onmouse

  • as3 rollOver or mouseOver使用说明

    所以当监听MouseEvent.ROLL_OVER事件后,鼠标移动到panel的几个按钮时,程序仍然认为鼠标悬停在panel上方.假设我们监听MouseEvent.MOUSE_OVER, 随着鼠标移到panel的按钮上,程序立刻判断鼠标离开了panel,已经到了按钮上方--这个结果不是我们需要的,此时本应去单击按钮,结果程序判断鼠标离开panel,会直接removeChild或者visible=false. 关于冒泡的话,不得不提AS3的事件流,简单的说就是一个捕捉--目标--冒泡的循环过程:事

  • JS小功能(onmouseover实现选择月份)实例代码

    JS小功能(onmouseover实现选择月份)实例代码

    效果: 代码: 复制代码 代码如下: <head runat="server">    <title></title>    <style type="text/css">        #backcolor        {            width: 400px;            height: 400px;            background: #FFFF00;            tex

  • 经过绑定元素时会多次触发mouseover和mouseout事件

    javascript的mouseover和mouseout事件,在绑定元素内部有子元素的情况下, 经过绑定元素时会多次触发mouseover和mouseout事件. jquery解决办法: jquery的mouseenter和mouseleave方法已经修复了这个问题,可以直接用来替代mouseover和mouseout 不过有个mouseenter和mouseleave有个小问题是,让鼠标从文档外直接进入绑定事件的元素时,mouseenter不生效 暂时解决办法是,别让绑定事件的元素靠浏览器边

  • jQuery中mouseover事件用法实例

    本文实例讲述了jQuery中mouseover事件用法.分享给大家供大家参考.具体分析如下: 当鼠标指针位于匹配的元素上方或者调用mouseover()方法时触发mouseover事件. 一个完整的事件过程,不但要有能够触发事件的条件,而且还要有事件处理程序. 可以通过mouseover()方法为mouseover事件绑定事件处理程序.例如: 复制代码 代码如下: $("div").mouseover(function(){$("div").text("我

  • 兼容ie和firefox的鼠标经过(onmouseover和onmouseout)实现--简短版

    前段时间一直找这个的简短实现  网上也有很多方法 昨天发现了这种方法 感觉是用代码最少的 呵呵 ie下支持css的js ff等支持:hover 就这样了 觉得好的就顶起来 无标题文档 #b_g_date tr{ event:expression(onmouseover = function(){this.style.backgroundColor='#E3FFC9'},onmouseout = function(){this.style.backgroundColor='#FFFFFF'});

  • 扩展Jquery插件处理mouseover时内部有子元素时发生样式闪烁

    解决思路如下: 首先,判断事件的当前节点,也就是jquery的currentTarget是否在target的包含中,即下面的扩展$.containsNode. 然后,在调用hover的时候的mouseover和mouseout事件里判断currentTarget是否在target的包含中,即$.fn.fhover扩展 下面就是相关代码: 复制代码 代码如下: $.containsNode = function(parentNode, childNode) { if (parentNode.con

  • javascript mouseover、mouseout停止事件冒泡的解决方案

    在IE里有onmouseleave和onmouseenter, 而对于要兼容各大浏览器的Web开发人员来说还是一件头疼的事. 虽然网上已经有针对Mozilla Firefox的一些计策,但代码量也是不容乐观的. 想寻求比较好的解决方案,于是就翻遍了国内的大小网站,终一无所获,不得不硬着头皮去读国外网站,结果是理想的,因为W3C里有relatedTarget,于是就有了下边的解决方案: 复制代码 代码如下: function isMouseLeaveOrEnter(e, handler) { if

  • 鼠标经过子元素触发mouseout，mouseover事件的解决方案

    我想实现的目标:当鼠标进入黑色框时,橙色框执行淡入动画:当黑色框范围移动的时候(即使经过粉色框,动画仍然不被触发):当鼠标移出的时候,橙色方块消失. 遇到的问题阐述:当鼠标移入黑色框的时候,橙色框执行淡入动画,但是当鼠标从黑色框经过粉色框的时候,橙色框就消失了,然后又执行一遍淡入动画.当鼠标从粉色框移出到黑色框的时候,橙色框的淡入动画又被执行.这不是我想要的. 初期代码: <!DOCTYPE html> <html> <head> <script src=&quo

  • IE中鼠标经过option触发mouseout的解决方法

    本文实例讲述了IE中鼠标经过option触发mouseout的解决方法.分享给大家供大家参考.具体分析如下: 要实现的功能: 有一个DIV,当鼠标经过时此DIV完全展开,当鼠标移开时DIV收缩回去,其中DIV里面有一个select选择框: 操作select的时候在IE中会出现一个问题,当鼠标经过option时,DIV会收缩回去,而在其他浏览器中无此现象. 解决的方法: 在IE中,当鼠标移到option时 window.event.toElement 的值为null,在其他浏览器中的值为objec

  • Android 中SwipeRefreshLayout与ViewPager滑动事件冲突解决方法

    Android 中SwipeRefreshLayout与ViewPager滑动事件冲突解决方法 问题描述: 开发中发现,SwipeRefreshLayout的下拉刷新,与ViewPager开发的banner的左右滑动事件有一点冲突,导致banner的左右滑动不够顺畅.很容易在banner的左右滑动的过程中,触发SwipeRefreshLayout的下拉刷新,从而导致banner左右滑动的体验很差. 解决方案: 可以在ViewPager的滑动时候设置SwipeRefreshLayout暂时不可用,

  • Android Studio中Run按钮是灰色的快速解决方法

    首先是,在不同的AS中,gradle版本不同,下载的sdk版本不同,这些,都在gradle(Project.Models)相关代码里调过来就好.之前的文章里有说过. 经过调好gradle这些文件,AS已经可以built 成功后. 下一步,Run the application. 这时候,遇到问题:Run按钮灰色,失效. 点击Run旁边 Select Run/Debug Configuration按钮 选择 Edit Configuration,于是: 在model下拉框中选择app.如果下拉框中

  • 浅谈pandas中DataFrame关于显示值省略的解决方法

    python的pandas库是一个非常好的工具,里面的DataFrame更是常用且好用,最近是越用越觉得设计的漂亮,pandas的很多细节设计的都非常好,有待使用过程中发掘. 好了,发完感慨,说一下最近DataFrame遇到的一个细节: 在使用DataFrame中有时候会遇到表格中的value显示不完全,像下面这样: In: import pandas as pd longString = u'''真正的科学家应当是个幻想家:谁不是幻想家,谁就只能把自己称为实践家.人生的磨难是很多的, 所以我们

  • Vue 项目中遇到的跨域问题及解决方法(后台php)

    Vue 项目中遇到的跨域问题及解决方法(后台php)

    问题描述 前端 vue 框架,后台 php,百度跨域问题后台加这段代码 header("Access-Control-Allow-Origin: *"); 加了之后报这个错: The value of the 'Access-Control-Allow-Origin' header in the response must not be the wildcard '*' when the request's credentials mode is 'include'. The valu

  • Easyui 关闭jquery-easui tab标签页前触发事件的解决方法

    测试环境 jquery-easyui-1.5.3 需求场景 点击父页面tab 页关闭按钮时,需要做判断,判断该tab页面是否可以关闭:获取子页面js中定义的taskStatus,如果taskStatu不为taskEnd,则表示任务还在执行,不让关闭 解决方法 给tab标签页增加onBeforeClose事件处理函数,如下: $(function(){ $('#tabs').tabs({ onBeforeClose: function(title,index){ if (title.indexOf

  • vue开发中数据更新但视图不刷新的解决方法

    目录 **解决方法1:静默刷新(使用v-if的特性) 解决方法2:Vue.$set(官方推荐) 解决方法3: Vue.$forceUpdate(手动强制更新视图) 解决方法4:Object.assign(使用修改栈能触发视图更新的特性) 解决方法5:对于数组还可以使用splice方法 总结 我们在开发过程中会碰到数据更新,但是视图并未改变的情况,情况如下: 第一种:动态给对象新增属性或者删除属性是不会触发视图刷新的,Vue识别不到: 第二种:通过数组下标修改数组中的元素或者手动修改数组的长度,V

  • Swift 3中使用FMDB遇到的问题与解决方法

    Swift 3中使用FMDB遇到的问题与解决方法

    本文主要给大家介绍了关于在Swift 3中使用FMDB遇到的问题与解决方法,分享出来供大家参考学习,下面来一起看看详细的介绍: 状况 OC项目转Swift,打算继续使用FMDB.Cocoapods进来后,在桥接文件 "XXX-Bridging-Header.h" 中写入#import "FMDB.h". 编译报错,如下图所示. Cocoapods Podfile platform :ios, '10.0' use_frameworks! targetsArray =

  • jsp页面中表达式语言中的$符号不起作用的解决方法

    今天myeclipse里部署了之前做的一个测试项目,发现jsp里的$符号tomcat启动后页面上显示出来了,百度搜了下别人也有类似的问题出现过.经提醒原来是web.xml配置的version设置的是2.5而我tomcat5启动的.是tomcat的版本低于web的版本,从而导致$符号不能正常使用. 后将tomcat5改用tomcat6.jdk采用1.6 启动spring2.5项目.$显示问题解决. 以下是网上摘录的详细说明: 在jsp页面中用表达式语言中的$符号,如${pageScope.titl

  • Android中EditText 设置 imeOptions 无效问题的解决方法

    有时候我们需要在EditText  输出完之后 需要在键盘出现 右下角变成"Go"或"前往 搜索时:通常我们需要设置Android:imeOptions属性.Android:imeOptions的值有actionGo. actionSend .actionSearch.actionDone等 但是今天我发现设置了无效  那是因为我设置了 android:maxLines="1" 解决方法 就是去掉 android:maxLines="1"

随机推荐