html5鼠标滚轮事件mousewheel使用

98 阅读 0 评论 65 点赞

我是靠谱客的博主可爱灰狼，最近开发中收集的这篇文章主要介绍html5鼠标滚轮事件mousewheel使用，觉得挺不错的，现在分享给大家，希望可以做个参考。

概述

html5中增加了一个新的鼠标事件onmousewheel 这个事件使用的时候要注意使用方法，不然就不会起到作用，下面是一个实例

html文件

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>图片变换</title>
<style type="text/css">
#image-content{
border: 1px solid green;
}
</style>
</head>
<body>
<div class="content">
<canvas id="image-content" width="800" height="600">
你的浏览器不支持html5
</canvas>
</div>
<script src="imagetrans.js"></script>
</body>
</html>

imagetrans.js

var canvas=document.getElementById('image-content');
var content=canvas.getContext("2d");
if (canvas.addEventListener) {
// IE9, Chrome, Safari, Opera
canvas.addEventListener("mousewheel", scaleCanvas, false);
// Firefox
canvas.addEventListener("DOMMouseScroll", scaleCanvas, false);
}else{
// IE 6/7/8
canvas.attachEvent("onmousewheel", scaleCanvas);
}
function scaleCanvas(event){
event.preventDefault();
var e = window.event || event; // old IE support
var delta = Math.max(-1, Math.min(1, (e.wheelDelta || -e.detail)));
alert(delta+"->"+ e.wheelDelta+'->'+ e.detail);
}

需要注意的是在不同浏览器中addEventListener的code不一样，而获取滑轮是向上滚动还是向下滚到也要注意