Firefox使用DOMMouseScroll,其他的浏览器使用mousewheel。滚动事件触发时Firefox使用detail属性捕捉滚轮信息,其他的浏览器使用wheelDelta。不知道为何在该问题上其他厂商和微软的如此一致。Firefox可以使用addEventListener方法绑定DomMouseScroll事件。

elem.addEventListener('DOMMouseScroll', func, false);

IE和其他的主流浏览器可以使用传统的事件绑定模型。但不要使用IE专有的attachEvent方法,其他主流浏览器并不识别微软的这个方法。下面先测试一下。

120

<script type="text/javascript">
    // <![CDATA[
    var mouseWheel = document.getElementById('mouseWheel');
    
    if (mouseWheel.addEventListener) {
        
        mouseWheel.addEventListener('DOMMouseScroll', function(event) {
            
            event.target.innerHTML = event.detail;
            event.stopPropagation();
            event.preventDefault();
            
        }, false);
    }
    mouseWheel.onmousewheel = function(event) {
        
        event = event || window.event;
        mouseWheel.innerHTML = event.wheelDelta;
        event.returnValue = false;
        
    }
    // ]]>
</script>

测试之后得到如下的结论。

    Firefox
    鼠标滚轮向上滚动是-3,向下滚动是3

    IE
    鼠标滚轮向上滚动是120,向下滚动是-120

    Safari
    鼠标滚轮向上滚动是360,向下滚动是-360

    Opera
    鼠标滚轮向上滚动是120,向下滚动是-120

    Chrome
    鼠标滚轮向上滚动是120,向下滚动是-120

有人在Safari下做了一些测试:”只是滚动一圈的话,值为+-0.1,如果滚动地稍微快点的话(多滚动几圈),这个值也会变大。 这是因为Mac OS下有鼠标滚轮加速功能。滚动一次,浏览器滚动1像素,滚动3次,浏览器却滚动30像素”。同时他也对Camino(基于Gecko的内核引擎)进行研究:“与Safari相似(+- 0.3 to +-Infinity),虽然使用了与firefox相同的内核引擎,但结果这个delta值却只在+-2.666666里浮动,无论滚动速度如何。”

ASP(Server.UrlEncode)、PHP(urlencode())函数编码结果,或是经过asp、php等动态语言直接写入COOKIES的中文字符,用JS读取的时候,都会碰到一个编码的问题,那就是最终字符串被urlencode编码了,而又时有需要从JS在客户端去读取这些数据。而本文,就大概说说如何在js中通过系统自带的函数去解决这个问题。

而相信碰到过此问题的朋友应该都有所了解,目前网络上流行一些js下的自定义函数去解决这个问题,如说vbscript(URLDecode())、javascript(UrlDecode())等。而这两个函数,都无法很好的与asp(Server.UrlEncode)、php(urlencode())这两个函数相互通讯。

javascript(UrlDecodedecodeURIComponent())这个函数名称实在太常了,个人真的不太了解,毕竟js的系统函数很多,很容易遗漏。烦恼在偶然间发现了这个函数!
编码函数:encodeURIComponent()
解码函数:decodeURIComponent()
decodeURIComponent()语法

decodeURIComponent(URIstring)
参 数:(URIstring)必需。一个字符串,含有编码 URI 组件或其他要解码的文本。
返回值:URIstring 的副本,其中的十六进制转义序列将被它们表示的字符替换。

示例:

<script type="text/javascript">
// <![CDATA[
var test1="烦恼";

var test2="%E7%83%A6%E6%81%BC";

document.write("编码(原="+test1+"):"+encodeURIComponent(test1));

document.write("解码(原="+test2+"):"+decodeURIComponent(test2));
// ]]>
</script>

结果:

编码(原=烦恼):%E7%83%A6%E6%81%BC
解码(原=%E7%83%A6%E6%81%BC):烦恼

注意:在UTF-8编码环境下测试通过。

1、使用Html实现












2、使用javascript实现


当然还有很多中实现的方法,写到博客仅仅是为了方便查询,欢迎各位高手指教!