包含 js 标签的文章

JS 鼠标经过内部时触发 onmouseout 函数的修补函数 mouseleave

相信做过下拉菜单的朋友都会遇到过鼠标在经过菜单内部元素上面的时候也触发父元素的 onmouseout 导致菜单隐藏的问题，郁闷吧，我曾经很郁闷，IE 有 onmouseleave 和 onmouseenter 这两个东西，jQuery 也有 mouseleave 和 mouseenter，可是我不想用 jQuery 又想兼容多浏器咱办，我搞来搞去写了这么一个后补方案，用法见里面的注释。

  1. /*  
  2.     鼠标 onmouseleave 修复事件，兼容IE和FF  
  3.     参数e 是对象传递的触发事件 FF下想访问event对象必须传递event参数  
  4.     参数o 是目标DIV对象  
  5.     onmouseout="mouseleave(event,this,function(){alert('leave')})";  
  6. */    
  7. function mouseleave(e,o,funcCallBack) {  
  8.     // FF 下判断鼠标是否离开  
  9.     if(window.navigator.userAgent.indexOf("MSIE") == "-1") {  
  10.         var reltg = e.relatedTarget ? e.relatedTarget : e.type == 'mouseout' ? e.toElement : e.fromElement;     
  11.         while (reltg && reltg != o)     
  12.             reltg = reltg.parentNode;     
  13.         if(reltg != o) {  
  14.             funcCallBack();  
  15.         }  
  16.     } else {  
  17.         // IE  
  18.         if(o.contains(event.toElement ) == false) funcCallBack();  
  19.     }  
  20. } 

 

Pader 2009-10-29 1

JS 获取鼠标位置

以前写了一个获取鼠标位置的函数，但是是放在页面 onmousemove 监听事件中，有时候也不太好用，最近在做一个文件管理器的时候很多都用到右键菜单，于是有了这个。

  1. /*  
  2.     获取鼠标座标，需传递 event  
  3. */ 
  4. var getEventMouseLocation = function(e) {  
  5.     var loc = {};  
  6.     var objEvent = e ? e : (window.event ? window.event : null);  
  7.     if(window.navigator.userAgent.indexOf("MSIE") == "-1") {  
  8.         loc.x = objEvent.pageX;  
  9.         loc.y = objEvent.pageY;  
  10.     } else {  
  11.         loc.x = objEvent.x + document.documentElement.scrollLeft;  
  12.         loc.y = objEvent.y + document.documentElement.scrollTop;  
  13.     }  
  14.     return loc;  
  15. }; 

在使用的时候尽可能的传递 event，但是你如果实在不想传也行。例：

  1. <script type="text/javascript"> 
  2. function helloworld(e) {  
  3.     var loc = getEventMouseLocation(e);  
  4.     alert(loc.x + ":" + loc.y);  
  5. }  
  6. </script> 
  7. <button onclick="helloworld(event);">点击</button> 
Pader 2009-10-29 0

网页中随时获取鼠标位置

好久没更新博客了,连看奥运会的时候都没上过网,这次给大家带来一个 JavaScript 好东西,自己拿去玩吧...
 

JavaScript代码
  1. <!--   
  2. /*   
  3.     2008-7-28 17:54  
  4.     Made by pader of http://www.vgot.cn  
  5.     我们先在这里声明了一个全局空数组变量 mousePos  
  6.     用它来存放鼠标的即时坐标数据  
  7. */  
  8. var mousePos = new Array();   
  9. /*  
  10.     mouseLoc 把获取到的鼠标坐标数据赋值给了  
  11.     mousePos 这个全局数组.  
  12.     mousePos["x"] 的值就是鼠标的 X 轴即横向距页面左边的像素距离  
  13.     mousePos["y"] 的值就是鼠标的 Y 轴即纵向距页面顶部的像素距离  
  14. */  
  15. function mouseLoc(e){   
  16.   if(document.all){   
  17.     x = event.x + document.body.scrollLeft;   
  18.     y = event.y + document.body.scrollTop;   
  19.   } else {   
  20.     x = e.pageX;   
  21.     y = e.pageY;   
  22.   }   
  23.   mousePos["x"] = x;   
  24.   mousePos["y"] = y;   
  25.   return true;   
  26. }   
  27. /*  
  28.     为了让页面能即时获得鼠标的坐标,我们只能用之类的事件执行这样的函数.  
  29.     在这里使用 document.onmousemove 事件来执行 mouseLoc  
  30.     以不断更新全局数组 mousePos 里的鼠标位置数据  
  31. */  
  32. if(document.layers){    //NS4   
  33.     document.captureEvents(Event.MOUSEMOVE);   
  34. }   
  35. document.onmousemove = mouseLoc;   
  36. /*  
  37.     那如果我还想在这个事件里做其它的事情怎么办呢?  
  38.     可以像下面这样写:  
  39.         document.onmousemove = function(){  
  40.             document.body.onmousemove = mouseLoc;  
  41.             alert('第一个弹出信息');  
  42.             alert("弹出第二个信息");  
  43.             //更多...  
  44.         }  
  45.     这里为防止与 document.onmousemove 冲突,我们在 function(){} 里面  
  46.     使用的是 document.body.onmousemove 来执行 mouseLoc;  
  47. */  
  48. //-->  


去掉注释就这么点

 

JavaScript代码
  1. <!--   
  2. var mousePos = new Array();   
  3.   
  4. function mouseLoc(e){   
  5.   if(document.all){   
  6.     x = event.x + document.body.scrollLeft;   
  7.     y = event.y + document.body.scrollTop;   
  8.   } else {   
  9.     x = e.pageX;   
  10.     y = e.pageY;   
  11.   }   
  12.   mousePos["x"] = x;   
  13.   mousePos["y"] = y;   
  14.   return true;   
  15. }   
  16.   
  17. if(document.layers){    //NS4   
  18.     document.captureEvents(Event.MOUSEMOVE);   
  19. }   
  20. document.onmousemove = mouseLoc;   
  21. //-->  
Pader 2008-8-27 0

终于搞定了

想写几个通用的 AJAX 所用的函数，在写 postRequest() 这个函数的时候总是得不到返回值，后来才知道，用异步数据是不行的，得同步，记录下。。。

在此要感谢这篇文章 http://xujingbao.javaeye.com/blog/186050
 
下面的 writePostRequest() 函数因为不想脚本臃肿，就直接调用了 postRequest() 函数了，因为没有返回值可以用异步回调的方式，不过要另写整个函数，所以如果想看上去执行速度快一些的话就可以重写 writePostRequest() 函数用异步的方式。
另外一点就是如果 Post 数据的时候中文要编码，否则发送到服务器端会乱码，当然可以在服务器端转换编码，详情可以参考《PHP的unescape()函数》这篇文章。

JavaScript代码

var xmlHttp;   
var isie = false;   
function createXmlHttp(){   
    var theObject;   
    if(window.ActiveXObject){ //Get xmlHttp   
        theObject = new ActiveXObject("Microsoft.XMLHTTP"); //IE6及以上版本   
        isie = true;   
    }else if(window.XMLHttpRequest){   
        theObject = new XMLHttpRequest();   
    }else{   
        alert("您的浏览器不支持XMLHTTP，页面无法创建对象，将会影响到页面的正常功能！");   
    }   
    return theObject;   
}   
  
function getRequest(url){   //获取 GET 返回数据   
    xmlHttp = createXmlHttp();   
    try{   
        if(isie == false ){   
            xmlHttp.open("GET", url, false);   
            xmlHttp.setRequestHeader("If-Modified-Since","0");    
            xmlHttp.overrideMimeType("text/html;charset=gb2312");   
            xmlHttp.send(null);   
            return xmlHttp.responseText;   
        }else{   
            xmlHttp.open("GET", url, false);   
            xmlHttp.setRequestHeader("If-Modified-Since","0");    
            xmlHttp.send(null);   
            if(xmlHttp.readyState == 4){   
                if(xmlHttp.status == 200 || xmlHttp.status == 0){   
                    return Recenspace(xmlHttp.responseBody);   
                }   
            }   
        }   
    }catch(exception){       
        document.write('exception:'+exception.message);       
    }       
}   
  
function postRequest(url,postString){   //获取 POST 返回数据   
    xmlHttp = createXmlHttp();   
    var returnText = null;   
    xmlHttp.onreadystatechange = function(){   
        if(xmlHttp.readyState == 4 && xmlHttp.status == 200){   
            returnText = xmlHttp.responseText;   
        }   
    }   
    xmlHttp.open("POST", url, false);   
    xmlHttp.setRequestHeader("Content-Type","application/x-www-form-urlencoded");   
  //xmlHttp.overrideMimeType("text/html;charset=gb2312");   
    xmlHttp.send(postString);   
    return returnText;   
}   
  
function Recenspace(Html){   
    var rs=new ActiveXObject("ADODB.RecordSet");   
    rs.fields.append("a",201,1);   
    rs.open();   
    rs.addNew();   
    rs(0).appendChunk(Html);   
    rs.update();   
    return rs(0).value;   
    rs.close();   
}   
  
function writeGetRequest(url,element){  //写入 GET 返回值   
    document.getElementById(element).innerHTML = getRequest(url);   
}   
  
function writePostRequest(url,postString,element){  //写入 POST 返回值   
    document.getElementById(element).innerHTML = postRequest(url,postString);   
}   
  
function doIt(){   
    //无操作函数    
}


Pader 2008-6-20 1

JavaScript获取GET的函数2

上次写的那个获得GET什的JS函数在最近参考了一个小脚本之后突有感想，便重写了一番，虽然是客户端脚本，速度不是问题，可是改过之后的效率要高多了，不用每次获取都循环了。

新的JS获取GET

JavaScript代码
  1. <script language="javascript">   
  2. <!--   
  3. /*  
  4. 获取GET值的JavaScript  
  5. 原创 by pader [QQ:270075658] [Homepage:www.vgot.cn] [E-mail:[email protected]]  
  6.   location_get_vars[get[0]] = unescape(get[1]);  
  7. */  
  8. function QueryGET(){   
  9. var urlt = window.location.href.split("?");   
  10. var gets = urlt[urlt.length-1].split("&");   
  11. var location_get_vars = new Array();   
  12.  for(var i=0;i<gets.length;i++){   
  13.   var get = gets[i].split("=");   
  14.   eval("location_get_vars['" + get[0] + "'] = '" + unescape(get[1]) + "';");   
  15.  }   
  16. return location_get_vars;   
  17. }   
  18.   
  19. var GET = QueryGET();   
  20. -->   
  21. </script>   

其中
 eval("location_get_vars['" + get[0] + "'] = '" + unescape(get[1]) + "';");
这一行行可以用
location_get_vars[get[0]] = unescape(get[1]);
代替。

最后使用的 var GET = QueryGET();  得到函数返回的所有的GET值，也就是一个数组。
用 GET["vgot"] 获得 vgot 的 GET 值。

Pader 2007-11-14 0