html js鼠标滚轮事件,鼠标滚轮事件 | 事件处理 | JavaScript 权威指南

鼠标滚轮事件

由 学院君 创建于9个月前, 最后更新于 9个月前

版本号 #1

506 views

0 likes

0 collects

除了 Firefox 之外所有浏览器都支持「mousewheel」事件，Firefox 使用「DOMMouseScroll」取代「mousewheel」，在 3 级 DOM 事件规范中又定义了「wheel」事件作为 「mousewheel」 和 「DOMMouseScroll」的标准版本。

下面代码演示了如何处理鼠标滚轮事件：

/**

* 把内容装入到一个指定大小的窗体或视口中

* @param content

* @param framewidth

* @param frameheight

* @param contentX

* @param contentY

*/

function enclose(content, framewidth, frameheight, contentX, contentY) {

framewidth = Math.max(framewidth, 50);

frameheight = Math.max(frameheight, 50);

contentX = Math.min(contentX, 0) || 0;

contentY = Math.min(contentY, 0) || 0;

// 初始化 frame 元素

var frame = document.createElement("div");

frame.className = "enclosure";

frame.style.width = framewidth + "px";

frame.style.height = frameheight + "px";

frame.style.overflow = "hidden";

frame.style.boxSizing = "border-box"; // border-box 简化了调整 frame 大小的计算

frame.style.webkitBoxSizing = "border-box";

frame.style.mozBoxSizing = "border-box";

content.parentNode.insertBefore(frame, content);

frame.appendChild(content);

// 确定元素相对于 frame 的位置

content.style.position = "relative";

content.style.left = contentX + "px";

content.style.top = contentY + "px";

var isMacWebkit = (navigator.userAgent.indexOf("Macintosh") !== -1 && navigator.userAgent.indexOf("Webkit") !== -1);

var isFirefox = (navigator.userAgent.indexOf("Gecko") !== -1);

// 注册 mousewheel 事件处理程序

frame.onwheel = wheelHandler;

frame.onmousewheel = wheelHandler;

if (isFirefox)

frame.addEventListener("DOMMouseScroll", wheelHandler, false);

function wheelHandler(event) {

var e = event || window.event;

var deltaX = e.deltaX * -30 || e.wheelDeltaX/4 || 0;

var deltaY = e.deltaY * -30 || e.wheelDeltaY/4 || (e.wheelDeltaY === undefined && e.wheelDelta/4)

|| e.detail * -10 || 0;

if (isMacWebkit) {

deltaX /= 30;

deltaY /= 30;

}

if (isFirefox && e.type !== "DOMMouseScroll")

frame.removeEventListener("DOMMouseScroll", wheelHandler, false);

var contentbox = content.getBoundingClientRect();

var contentwidth = contentbox.right - contentbox.left;

var contentheight = contentbox.bottom - contentbox.top;

if (e.altKey) {

if (deltaX) {

framewidth -= deltaX;

framewidth = Math.min(framewidth, contentwidth);

framewidth = Math.max(framewidth, 50);

frame.style.width = framewidth + "px";

}

if (deltaY) {

frameheight -= deltaY;

frameheight = Math.min(frameheight, contentheight);

frameheight = Math.max(frameheight, 50);

frame.style.height = frameheight + "px";

}

} else {

if (deltaX) {

var minoffset = Math.min(framewidth - contentwidth, 0);

contentX = Math.max(contentX + deltaX, minoffset);

contentX = Math.min(contentX, 0);

content.style.left = contentX + "px";

}

if (deltaY) {

var minoffset = Math.min(frameheight - contentheight, 0);

contentY = Math.max(contentY + deltaY, minoffset);

contentY = Math.min(contentY, 0);

content.style.top = contentY + "px";

}

}

if (e.preventDefault)

e.preventDefault();

if (e.stopPropagation)

e.stopPropagation();

e.cancelBubble = true;

e.returnValue = false;

return false;

}

}