javascript onmouseout问题解决方案

方案一:

希望实现当鼠标离开一个DIV的时候触发一个事件处理函数于是用onmouseout 结果却发现它的触发是不是也太敏感了原因现在也没有弄清楚 IE下好像是因为区分mouseout时的fromElement还是toElement ，IE 5.5以上的onmouseleave事件就比较好用偏FF又不支持这个事件只有自己想办法手工判断了。

<SCRIPT>
/***
* 参数e 是对象传递的触发事件 FF下想访问event对象必须传递event参数
* 参数o 是目标DIV对象
*/
function fun(e,o) {
        /* FF 下判断鼠标是否离开DIV */
        if(window.navigator.userAgent.indexOf("Firefox")>=1) {
            var x = e.clientX + document.body.scrollLeft;
            var y = e.clientY + document.body.scrollTop ;
            var left = o.offsetLeft;
            var top = o.offsetTop;
            var w = o.offsetWidth;
            var h = o.offsetHeight;

            if(y < top || y > (h + top) || x > left + w || x<left ) {
                alert("mouseout");
            }
        }

/* IE */
        if(o.contains(event.toElement ) == false    )
alert("mouseout");

    }
</SCRIPT>

<DIV οnmοuseοut=fun(event,this)>content</DIV>

需要注意在取鼠标的值的时候一定要加上滚动条已经拖动过的内容e.clientY + document.body.scrollTop 如果只是e.clientY得到是个错误的值当然如果高宽都很小是看不出来问题。取一个对象的高和宽也可以使用 clientHeight clientWidth 属性以后遇到FF IE不兼容的时候要多看看FF的开发手册 http://developer.mozilla.org/en/docs/DOM:element.offsetLeft

方案二:(与一相似)

js的onmouseout有很奇怪的一个问题。例如

</div>

我们预期只有当鼠标从div中移开的时候才会触发onmouseout事件，可是，事实上，当我们移到div中的元素时，例如本例中的a标签时，就会触发onmousout事件。也就是说，移到对象的子对象上，也算onmouseout了。这往往会让我们预期的效果达不到。今天的工作就遇到了这个问题。在blueidea上搜了一下，找了解决办法。兼容IE和FF。

<!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><script type="text/javascript">function test(obj, e) {if (e.currentTarget) {if (e.relatedTarget != obj) {if (obj != e.relatedTarget.parentNode) {     alert(1);    }   }} else {if (e.toElement != obj) {if (obj != e.toElement.parentNode) {     alert(1);    }   }}}</script><div onmouseout="test(this, event)" style="width:100px;height:100px;border:1px #666 solid"><span style="margin:5px;width:100%;height:100%;border:1px #ff0000 solid">faddsf</span></div></body></html>

今天发现JQ中关于这个问题,已经有了一个好的解决办法了.呵呵,jquery中定义了一种事件叫做"mouseleave",用这个事件做事件句柄的话,就可以解决这个问题了.越来越发现jquery是个好东西了.

方案三:

，jQuery　V1.2.2推荐用bind("mouseleave",function(){})来代替以前的mouseover方法
用bind("mouseenter",function(){})来代替mouseout，同样也针对以前的hover方法，要看详细的说明点这个地址：http://docs.jquery.com/Release:jQuery_1.2.2

$(document).ready(function() {
   $("#a1").bind("mouseleave", function(){
   $('<div style="color:red;">out</div>')
   .insertAfter($(this));
});
});

javascript onmouseout问题解决方案相关推荐

【转】调试JavaScript 错误的解决方案
A 使用alert() 和document.write() 方法监视变量值如果要中断代码的运行,监视变量的值,则使用alert() 方法: 如果需要查看的值很多,则使用document.write ...
IEC61131, IEC61499图形可视化，PLC图形可视化，PLC组态，VBScript和JavaScript脚本，解决方案源代码, 开发平台100% VC++源码2018!
IEC61131, IEC61499图形可视化,PLC图形可视化,PLC组态,VBScript和JavaScript脚本,解决方案源代码, 开发平台100% VC++源码2018! -- 全球领先. ...
JavaScript异步编程解决方案探究
javascript的天生单线程特性,使得异步编程对它异常重要,早期的通常做法是用回调函数来解决.但是随着逻辑的复杂,和javascript在服务端的大显神通,使得我们很容易就陷入"回调陷井 ...
JavaScript——对象合并解决方案
解决方案 1.extend() var obj1 = {a:1,b:2};var obj2 = {c:3,d:4};var assignObj = $.extend(obj1,obj2);consol ...
JavaScript——判断undefined解决方案
基本概念 undefined:undefined 属性用于存放 JavaScript 中未定义的值. 解决方案方法一:== var exp = undefined; if (exp == undef ...
javascript跨域解决方案
2019独角兽企业重金招聘Python工程师标准>>> 最近遇到了https跨域访问http域的问题,很多朋友理所当然的认为简单,问题是https跨域访问到http域上的资源,会进行 ...
与其他Javascript类库冲突解决方案
$(document).ready(function() { var $jq = jQuery.noConflict();$jq('#id').show(); });
8个使用JavaScript展示图片解决方案
1. JonDesign's SmoothGallery 2.0 SmoothGallery demo 2. (E)2 Photo Gallery (E)2 Photo Gallery demo 3. ...
JavaScript 教程（二）
面向对象编程实例对象与 new 命令 JavaScript 语言具有很强的面向对象编程能力,这里介绍 JavaScript 面向对象编程的基础知识对象是什么面向对象编程(Object Orien ...

javascript onmouseout问题解决方案

javascript onmouseout问题解决方案相关推荐

最新文章

热门文章