javascript鼠标事件摘要

常见的有：mousedown:按下鼠标的按钮。鼠标向上：鼠标的按钮被释放并弹起。点击：点击鼠标按钮。按下了鼠标按钮。Contextmenu:弹出右键菜单。鼠标悬停：将鼠标移到目标上。鼠标移出：将鼠标移到目标上。鼠标移动：鼠标在目标上移动。mousedown事件和mouseup事件可以说是click事件在时间上的细分，顺序是mousedown=mouseup=click。因此，单击事件通常会触发几个鼠标事件。请单击此处测试一次点击中捆绑了多少鼠标事件。空的

【Ctrl A All Note :如果外部Js需要刷新，可以执行】有了它们，我们可以做很多事情，但是对于高级应用(比如游戏)来说，显然是不够的，所以鼠标事件的点击事件是按照是点击左键还是右键来细分的。在DOM2.0中，W3C为鼠标事件做了一个范式，将鼠标事件解析为MouseEvent(我们可以用e.constructor==MouseEvent来判断它是不是鼠标事件，是左键点击还是右键点击是由其名为button的属性决定的。以下是W3C标准：0:按左键1:按中键(如果有的话)2:按右键当然微软不会妥协，因为e.button最初是微软实现的，网景用的是e .哪些，但相对来说，微软要复杂得多。0:无按键1:左键2:右键3:左键和右键同时按下4:中键5:左键和中键同时按下6:中键和右键同时按下7:三键同时按下更多详情，见下表。GE:Gecko壁虎；SA:SafariOP:OperaNs:网景iens 4ge1.0 sa3op8.0 ge 0.9 op 8.0e .按钮左键1undefined011中键4undefined123右键2 2undefined232e .哪个左键不defined1111中键不defined2223右键不defined3332由于这个原因，我们可以使用以下函数来绑定左右键。复制代码如下： var mouse event=function(){ var arg=引数[0]，El=arg.el | | document，leftfn=arg.left | | function () {}。right fn=arg . right | | function(){ }，middlefn=arg . middle | | function(){ }，button={ }；El . onmousedown=function(e){ e=e | | window . event；if(！\ v1’){ switch(e . button){ case 1: buttons . left=true；打破；case 2:buttons.right=true打破；case 4:buttons.middle=true打破；} } else { switch(e . what){ case 1: buttons . left=true；打破；case 2:buttons.middle=true打破；case 3:buttons.right=true打破；} } if(buttons . left){ left fn()；} else if(buttons . middle){ middlefn()；} else if(buttons . right){ right fn()；} buttons={ 'left':false，' middle':false，' right ' : false }；}}它接受哈希参数，这是可选的。hash的El是绑定鼠标事件的元素，left是点击左键触发的事件，以此类推。用法：复制代码如下： var El=document . getelementbyid(' mouse ')；var ex=document.getElementById('解释')；Var left=function () {ex。innerhtml=“左键被按下”；} var right=function () {ex。innerhtml='按下了右按钮'；} mouseEvent({el:el，left:left，middle:null，right : right })；请点击此处测试鼠标左、中、右键绑定功能【Ctrl A All Note :如果需要引入外部Js，只能刷新】。此外，通过在网页上点击鼠标，我们还可以获得很多有用的参数，比如获得当前鼠标的坐标。根据参考对象的不同，分为以下几组坐标系。一组基于当前浏览器的可视区域(clientX，clientY)，另一组基于显示器的屏幕(screenX，screenY)。另外，微软有一套坐标系(x，y)，相对于触发事件的对象的offsetParent，火狐有另一套坐标系(pageX，pageY)，相对于当前网页。我们可以通过下面的函数得到鼠标在网页上的坐标。复制的代码如下： var getCoordinationDocument=function(e){ e=e | | window . event；var x=e . pagex | |(e . clientx(document . document element . scrolleft | | document . body . scrolleft))；var y=e . pagey | |(e . clienty(document . document element . scroll top | | document . body . scroll top))；返回{'x':x，' y ' :y }；}请将鼠标移到这里。【Ctrl A Note All :如果需要引入外部Js，只能刷新】

(clientX，clientY)坐标系，不受滚动条影响。鼠标悬停、鼠标移动和鼠标退出没什么好说的，浏览器也没什么区别。当我们看鼠标滚轮事件时，这种差异非常严重。IE、Safari、Opera和chrome是鼠标滚轮事件，Firefox是DOMMouseScroll事件。就属性而言，IE就是事件。wheelDelta和Firefox是事件。细节。IE累计120时，累计-120。Firefox向上滚动-3，向下滚动3。我们可以构造一个函数来消除它们的差异。复制代码如下： var鼠标滚动=函数(fn) {var roll=函数(){var delta=0，e=自变量[0]| | window . event；delta=(e.wheelDelta)？e . wheel delta/120 :-(e . detail | | 0)/3；fn()；//回调函数{ if }中的回调函数(/a/[-1]==' a '){ document . addeventlistener(' domousescroll '，roll，false)；} else { document . onmousewheel=roll；}}这个函数接受一个函数作为参数，例如，复制代码的代码如下：鼠标滚动(function(delta){ varobj=document . getelementbyid(' scroll ')，current=par sent(obj . offset top)(deltaa * 10)；obj.style.top=当前“px”；});请用鼠标滚轮移动方框【Ctrl A All Note :如果需要引入外部Js，需要刷新后再执行】。