终于发现firefox也有让人蛋疼的地方了,几乎主流浏览器都支持onmousewheel的情况下,居然只有firefox执着的不支持onmousewheel事件。

PS:onmousewheel是当滚动滚轮时触发的事件。

在google,baidu等主流网站上搜索了老半天居然没有找到一个完美的解决办法,经过2天的不断修炼,最终完美实现,并且增加了一个鼠标点击到input框里后可以滚动滚轮递增或递减数值的功能,完全原创。

把下面代码加入页面任意地方即可(建议加到全局共用的js里)

下面是完整的代码:


// firefox 支持 onmousewheel,文本框支持滚动条滚动改变数字,input内支持max,min
(function()
{
function listener_onmousewheel(e)
{
    e = e||event;
    var obj = document.activeElement;
    //有onmousewheel方法,则跳过
    if (typeof obj.onmousewheel =='function')return;
    //非input跳过
    if (obj.tagName!='INPUT')return;
    if (obj.type!='text')return;

    //实现滚动滚轮改变input值
    var re = /^(\-)?\d*$/i;
    var r = obj.value.match(re);
    if (r!=null && r[0]!='')
    {
        var max = obj.getAttribute('max');
        var min = obj.getAttribute('min');
        if(e.preventDefault)e.preventDefault();
        e.returnValue=false;
        var old_value = obj.value;
        var n = old_value-0;
        var nn = (typeof e.wheelDelta=='number'?e.wheelDelta:-(e.detail))>0?1:-1;
        n += nn;
        if (null!=max)
        {
            n = Math.min(max,n);
        }
        if (null!=min)
        {
            n = Math.max(min,n);
        }
        obj.value = n;
        obj.select();

        if (obj.onchange)
        {
            // 修复因为滚动而改变数值后onchange失效的问题
            if (typeof obj._tmp_onblur=='undefined')
            {
                obj._old_value = old_value;
                obj._tmp_onblur = obj.onblur?obj.onblur:function(){};
                obj._tmp_onchange = obj.onchange;
                obj.onchange = function(){};
                obj.onblur = function()
                {
                    if (this._old_value!=obj.value)this._tmp_onchange();
                    this._tmp_onblur(e);
                    this.onblur = this._tmp_onblur;
                    this.onchange = this._tmp_onchange;
                    this._tmp_onblur = undefined;
                    this._old_value = undefined;
                }
            }
        }
    }
}

if (navigator.userAgent.toLowerCase().indexOf('firefox')>=0)
{
    //firefox支持onmousewheel
    addEventListener('DOMMouseScroll',function(e)
    {
        var onmousewheel = e.target.getAttribute('onmousewheel');
        if (onmousewheel)
        {
            if(e.preventDefault)e.preventDefault();
            e.returnValue=false;    //禁止页面滚动

            if ( typeof e.target.onmousewheel!='function' )
            {
                //将onmousewheel转换成function
                eval('window._tmpFun = function(event){'+onmousewheel+'}');
                e.target.onmousewheel = window._tmpFun;
                window._tmpFun = null;
            }
            // 不直接执行是因为若onmousewheel(e)运行时间较长的话,会导致锁定滚动失效,使用setTimeout可避免
            setTimeout(function(){
                e.target.onmousewheel(e);
            },1);
        }
        else
        {
            //没有onmousewheel则监听默认
            listener_onmousewheel(e);
        }
    },false);
}
else
{
    if( document.addEventListener )
    {
        document.addEventListener('DOMMouseScroll',listener_onmousewheel,false);
    }
    document.onmousewheel = listener_onmousewheel;
}
})();

如果只需要firefox下支持onmousewheel功能,只需要以下代码:

if (navigator.userAgent.toLowerCase().indexOf('firefox')>=0)
{
    //firefox支持onmousewheel
    addEventListener('DOMMouseScroll',function(e)
    {
        var onmousewheel = e.target.getAttribute('onmousewheel');
        if (onmousewheel)
        {
            if(e.preventDefault)e.preventDefault();
            e.returnValue=false;    //禁止页面滚动

            if ( typeof e.target.onmousewheel!='function' )
            {
                //将onmousewheel转换成function
                eval('window._tmpFun = function(event){'+onmousewheel+'}');
                e.target.onmousewheel = window._tmpFun;
                window._tmpFun = null;
            }
            // 不直接执行是因为若onmousewheel(e)运行时间较长的话,会导致锁定滚动失效,使用setTimeout可避免
            setTimeout(function(){
                e.target.onmousewheel(e);
            },1);
        }
    },false);
}