鼠标滚轮事件

先说一下我的思路，在网页上的div中嵌入一个SVG图像，使用鼠标滚轮上下滚动控制它放大和缩小，这跟地图差不多，理论上应该是可以实现的吧。
当鼠标位于该div的上方时触发事件，此时鼠标滚轮滚动不会使整个页面滑动，当鼠标滚轮向上滑动时放大图片，当鼠标滚轮向下滑动时缩小图片，当鼠标离开该div时，事件取消，鼠标滚轮滑动可以操控网页滚动。
这是我的思路，但是执行起来就发现问题了：Chrome浏览器中，鼠标放到div上滚动是可以有事件产生的（我是用alert试的，并没有直接放大缩小），问题是整个页面都会滚动，还有，鼠标离开div后该效果还会存在。
在其他浏览器中，鼠标放大div上滚动没有效果，只有当鼠标从div中移出再滚动时，才会触发事件，Firefox干脆没效果，另外也是整个页面都会滚动。
有人知道是怎么回事不？$(document).ready(function(){
$("#svglocation").mouseenter(function()
{
var scrollFunc=function(e){
var direct=0;
e=e || window.event;

if(e.wheelDelta){//IE/Opera/Chrome 
userMouse(e.wheelDelta);
}else if(e.detail){//Firefox
userMouse(e.wheelDelta);
}
};
//alert("Code implement here-------------------"); 

/*注册事件*/
if(document.addEventListener){
document.addEventListener('DOMMouseScroll',scrollFunc,false);
}//W3C
//window.onmousewheel=document.onmousewheel=scrollFunc;//IE/Opera/Chrome/Safari
window.onmousewheel != document.onmousewheel;
document.onmousewheel=scrollFunc;

//自己的函数 
function userMouse(flage){
if(flage == 3){
alert("firefox下鼠标向上滚动！");
}else if(flage == -3){
alert("firefox下鼠标向下滚动！");
}else if(flage == 120){
alert("IE下鼠标向上滚动！");
}else if(flage == -120){
alert("IE下鼠标向下滚动！");
}
}
});
$("#svglocation").mouseleave(function(){
//alert("2");
});
});