JS如何判断鼠标滚轮事件分析

JavaScript021

JS如何判断鼠标滚轮事件分析,第1张

我们都见到过这些效果，用鼠标滚轮实现某个表单内的数字增加减少操作，或者滚轮控制某个按钮的左右，上下滚动。这些都是通过js对鼠标滚轮的事件监听来实现的。今天这里介绍的是一点简单的js对于鼠标滚轮事件的监听。先分析原理：我们是通过判断鼠标滚动的获取一个值，然后根据这个值判断滚动的方向。然而不同浏览器有不同的获取方法，所以要分浏览器写方法。不同浏览器不同的事件首先，不同的浏览器有不同的滚轮事件。主要是有两种，onmousewheel（firefox不支持）和DOMMouseScroll（只有firefox支持），关于这两个事件这里不做详述，想要了解的朋友请先去了解鼠标滚轮(mousewheel)和DOMMouseScroll事件。过程中需要添加事件监听：兼容firefox采用addEventListener监听。js返回数值判断滚轮上下判断滚轮向上或向下在浏览器中也要考虑兼容性（IE、Opera、Safari、Firefox、Chrome）中Firefox 使用detail，其余四类使用wheelDelta；两者只在取值上也是不一致，但是含义一致，detail与wheelDelta只各取两个 值，detail只取±3，wheelDelta只取±120，其中正数表示为向上，负数表示向下。 具体的代码如下所示：<label for=wheelDelta滚动值:</label(IE/Opera)<input type=text id=wheelDelta/<label for=detail滚动值:(Firefox)</label<input type=text id=detail/<script type=text/javascriptvar scrollFunc=function(e){e = e || window.eventvar t1=document.getElementById(wheelDelta)var t2=document.getElementById(detail)if(e.wheelDelta){//IE/Opera/Chromet1.value=e.wheelDelta}else if(e.detail){//Firefoxt2.value=e.detail}}/*监听事件*/

window.onmousewheel = function(){  //触发滚轮事件

}

window.onscroll = function(){  //滚动条事件

}

//其实你的问题直接使用判断滚动条应该就可以了，但是如果一定要拖动滚动条才执行事件，我们可以通过获取鼠标位置来模拟

var a = document.getElementsByTagName("html")[0]

window.onmousemove = function(){

        //一般默认滚动条12px宽，当鼠标位于浏览器窗口右边12px内按下鼠标可以视为拖动滚动条

if(innerWidth - event.clientX < 12){

a.onmousedown = function(){

console.log(1)

}

}else{

a.onmousedown = null

}

}

MFC鼠标滚轮消息WM_MOUSEWHEEL

使用WM_MOUSEWHEEL

需要把CWnd设定为Focus

ON_WM_MOUSEWHEEL( )

CWnd::OnMouseWheel

afx_msg BOOL OnMouseWheel( UINT nFlags, short zDelta, CPoint pt )

返回值：如果允许鼠标轮滚动，则返回非零值；否则返回0。

参数：

nFlags 指明是否按下了虚拟键。这个参数可以是下列值的组合：

· MK_CONTROL 如果CTRL键被按下，则设置此位。

· MK_LBUTTON 如果鼠标左键被按下，则设置此位。

· MK_MBUTTON 如果鼠标中键被按下，则设置此位。

· MK_RBUTTON 如果鼠标右键被按下，则设置此位。

· MK_SHIFT 如果SHIFT键被按下，则设置此位。

zDelta 指明了旋转的距离。zDelta值以WHEEL_DELTA，即120的倍数或部分的形式表达。小于零的数表明往回滚动（向着用户），而大于零的数表明滚向远处（离开用户）。用户可以在鼠标软件中改变滚轮设置以反转这种响应。有关这个参数的更多信息参见说明部分。

pt 指定了光标的x和y轴坐标。这些坐标通常是相对于窗口的左上角的。