JavaScript事件类型中焦点、鼠标和滚轮事件详解(2)

relatedTarget属性提供了相关元素的信息。这个属性只对于mouseover和mouseout事件才包含值;对于其他事件的值则是null;IE8之前的版本不支持relatedTarget属性,在mouseover事件触发时,IE的fromElement属性中保存了相关元素;在mouseout事件触发时,IE的toElement属性中保存着相关元素。

如:

var dot = document.getElementById("dot"); dot.onmouseout = function (){ console.log("mouse out from" + event.target.tagName + "to" + event.relatedTarget.tagName); };

如:

function getRelatedTarget() { if (event.ralatedTarget) { return event.relatedTarget; } else if (event.toElement) { return event.toElement; } else if (event.fromElement) { return event.fromElement; } else { return null; } }

四、鼠标按钮

1、button属性

DOM的event.button属性有三个值:0为主鼠标按钮、1为中间鼠标按钮、2为次鼠标按钮。在常规设置中,主鼠标按钮就是鼠标左键;次鼠标按钮就是鼠标右键。

IE8及之前的版本也提供了button属性,但这个属性的值与DOM的button属性有很大差异:

0:没有按下鼠标按钮;

1:主鼠标按钮;

2:次鼠标按钮;

3:同时按下主鼠标按钮和次鼠标按钮;

4:中间鼠标按钮;

5:同时按下主鼠标按钮和中间鼠标按钮;

6:同时按下次鼠标按钮和中间鼠标按钮;

7:同时按下三个鼠标按钮

兼容版:

function getButton() { if (document.implementation.hasFeature("MouseEvents", "2.0")) { return event.button; } else { switch (event.button) { case 0: case 1: case 3: case 5: case 7: return 0; case 2: case 6: return 2; case 4: return 1; } } }

另外,如果要屏蔽鼠标右键,应该使用:

document.oncontextmenu = function(event) { // if (window.event) { // event = window.event; // } // try { // var the = event.srcElement; // if (!((the.tagName == "INPUT" && the.type.toLowerCase() == "text") || the.tagName == "TEXTAREA")) { // return false; // } // return true; // } catch (e) { // return false; // } return false; }

这个事件是HTML5定义的,以后再讨论

2、更多的事件信息

detail属性

对于鼠标事件来说,detail包含了一个数值,表示在给定位置上发生了多少次单击(一次mousedown和一次mouseup),次数从1开始计数,如果mousedown和mouseup之间移动了位置,detail会被重置0,如果单击间隔太长也会被重置为0.

3、鼠标滚轮事件

mousewheel事件和wheelDelta属性

在垂直放向上滚动页面时,就会触发mousewheel,event对象里面的wheelDelta属性则表示当用户向前滚动滚轮时,wheelDelta是120的倍数;当向后滚动滚轮时,wheelDelta是-120的倍数。如:

var clientHeight = document.documentElement.clientHeight; var divs = document.getElementsByTagName("div"); for (var i = 0; i < divs.length; i++) { divs[i].style.height = clientHeight + "px"; }; window.onmousewheel = function () { if (event.wheelDelta <= -120) { window.scrollBy(0,clientHeight); }else if(event.wheelDelta >= 120){ window.scrollBy(0,-clientHeight); }; }

另外,在Opera 9.5之前的版本中,wheelDelta值的正负号是颠倒的。

此外,Firefox支持一个名为DOMMouseScroll的类似事件,也是在鼠标滚动滚轮时除法。有关鼠标滚轮的信息保存在detail属性中。向前滚动这个属性的值为-3的倍数,向后滚动,这个属性的值是3的倍数。

通用版:

function getWheelDelta() { if (event.wheelDelta) { return (client.engine.opera && client.engine.opera < 9.5 ? -event.wheelDelta : event.wheelDelta); } else { return -event.detail * 40; }; }

4、触摸设备

iOS和Android设备中:

不支持dblclick;

轻击可单击元素会触发mousemove;如果此操作会导致内容变化,将不再有其他事件发声;如果屏幕没有发生变化,那么依次发生mousedown、mouseup和click事件;

mousemove事件也会触发mouseover和mouseout事件;

两个手指操作会触发mousewheel和scroll;

5、无障碍性问题

使用click事件执行代码;

不要使用onmouseover向用户显示新的信息;

不要使用dblclick执行重要的操作;

内容版权声明:除非注明,否则皆为本站原创文章。

转载注明出处:https://www.heiqu.com/wgwgdx.html