Jsローラー事件
3242 ワード
マウスホイール IE/Chrome:onmousew イベント:wheelDeltaデジタルタイプ ローラーを上に上げると、120 です.ローラーが下に行くと-120 です.標準以下のevent.detailは常に0であり、非標準IEのevent.detailはundefined である. ff:DOMMouseScurollは、バインディング を達成するために、addEvent Listenerを使用しなければならない. evnet.detailローラーが上に行くと、-3ローラーが下に行くということです.つまり、3 です. return falseが阻止するのは、obj.onイベント名=fnによってトリガされるデフォルト動作であり、addEventListenerバインディング挙動 を阻止できない. addEvent Listenerで紐付けされたイベントは、イベントの下のpreventDefault()によってデフォルト挙動を阻止する必要がある . IEの下でatachEventで紐付けすれば、やはりreturn falseでデフォルトイベント を阻止することができます.つまり、デフォルトの行動を禁止するのはイベントではなく、イベントをバインディングする形です.
/* */ window.onload = function() { var oDiv = document.getElementById('div1'); /* ie/chrome : onmousewheel event.wheelDelta ：120 ：-120 firefox : DOMMouseScroll addEventListener event.detail ：-3 ：3 return false obj.on =fn addEventListener event preventDefault(); */ oDiv.onmousewheel = fn; if (oDiv.addEventListener) { oDiv.addEventListener('DOMMouseScroll', fn, false); } function fn(ev) { var ev = ev || event; var b = true; if (ev.wheelDelta) { b = ev.wheelDelta > 0 ? true : false; } else { b = ev.detail < 0 ? true : false; } if ( b ) { this.style.height = this.offsetHeight - 10 + 'px'; } else { this.style.height = this.offsetHeight + 10 + 'px'; } if (ev.preventDefault) { ev.preventDefault(); } return false; } }
封装成插件
/*
*/
mousewheel(document.getElementById("div1"),function(){console.log(" ")},function(){console.log(" ")});
function mousewheel(obj,downfn,upfn)
{
obj.onmousewheel = fn;
if (obj.addEventListener) {
obj.addEventListener('DOMMouseScroll', fn, false);
}
function fn(ev) {
var ev = ev || event;
var b = true;
if (ev.wheelDelta) {
b = ev.wheelDelta > 0 ? true : false;
} else {
b = ev.detail < 0 ? true : false;
}
if(b) {
upfn&&upfn();
} else {
downfn&&downfn();
}
if (ev.preventDefault) {
ev.preventDefault();
}
return false;
}
}