终于发现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);
}