鼠标滚轮事件java_JavaScript 事件——“事件类型”中“焦点、鼠标和滚轮事件”的注意要点...

焦点事件

一般利用这些事件与document.hasFocus()方法和document.activeElement属性配合。主要有：

blur：元素失去焦点，不会冒泡；

DOMFocusIn：同HTML事件focus，于DOM3遭废弃，选用focusin；

DOMFocusOut：同HTML事件blur，于DOM3遭废弃，选用focusout；

focus：元素获得焦点，不回冒泡；

focusin：获得焦点，与HTML事件focus等价，但会冒泡；

focusout：失去焦点，与HTML事件blur等价；

如：

window.onfocus = function () {

console.log('focus'); //focus

console.log(document.hasFocus()); //True

}

window.onblur = function () {

console.log('blur'); //blur

console.log(document.hasFocus()); //False

}

当焦点从页面中的一个元素转移到另一个元素会触发下面的事件：

focusout --> focusin --> blur --> DOMFocusOut --> focus --> DOMFocusIn

鼠标事件

DOM3级事件中定义了9个鼠标事件：

click

dblclick

mousedown：用户按下任意鼠标按钮时触发，不能通过键盘触发这个事件；

mouseup：用户释放鼠标按钮时触发，不能通过键盘触发这个事件；

mousemove：不能通过键盘触发这个事件；

mouseenter：不冒泡，且光标移动到后代元素上不会触发；

mouseleave：不冒泡，且光标移动到后代元素上不会触发；

mouseover：光标移动到后代元素上会触发；

mouseout：光标移动到后代元素上会触发；

举例如下：

div.onmouseover = function() {

console.log('mouseover'); //在子元素上会触发

}

div.onmouseout = function() {

console.log('mouseout'); //在子元素上会触发

}

div.onmouseenter = function() {

console.log('mouseenter'); //在子元素上不会触发

}

div.onmouseleave = function() {

console.log('mouseleave'); //在子元素上不会触发

}

只有在同一个元素上相继除法mousedown和mouseup事件，才会触发click事件；只有触发两次click事件，才会触发依次dblclick事件。

顺序如下：

mousedown --> mouseup --> click --> mousedown --> mouseup --> click --> dblclick

IE8之前的版本中有一个bug，在双击事件中，会跳过第二个mousedown和click事件

滚轮事件

客户区坐标位置clientX和clientY属性

如：

window.onmousemove = function() {

clickX = event.clientX;

clickY = event.clientY;

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

div.src = "hhh.gif"

div.style.position = "absolute";

div.style.width = '100px';

div.style.left = clickX + "px";

div.style.top = clickY + "px";

document.body.appendChild(div);

};

页面坐标位置pageX与pageY；

window.onclick = function() {

clickX = event.pageX;

clickY = event.pageY;

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

div.src = "ppp.png"

div.style.position = "absolute";

div.style.width = '100px';

div.style.left = clickX + "px";

div.style.top = clickY + "px";

document.body.appendChild(div);

};

在IE8及更早版本中不支持这个页面坐标位置，可以计算出来，需要用到混合模式下的document.body和标准模式下的document.documentElement中的scrollLeft和scrollTop属性：

if (clickX === undefined) {

clickX = event.clientX + (document.body.scrollLeft || document.documentElement.scrollLeft);

};

if (clickY === undefined) {

clickY = event.clientY + (document.body.scrollTop || document.documentElement.scrollTop);

};

屏幕坐标位置screenX和screenY；

通过该属性可以获得相对于屏幕的坐标。

修改键

修改键有Shift、Ctrl、Alt、Meta(window上的Windows键，苹果机上的Cmd键)；对应的修改键的状态是shiftKey、ctrlKey、altKey、metaKey，这些属性包含的都是布尔值，如果相应的键被按下了，则为true，否则为false。如：

var array = [];

var timing = setTimeout(showArray, 100);

window.onclick = function() {

if (event.shiftKey) {

array.push("shift");

};

if (event.ctrlKey) {

array.push("ctrl");

};

if (event.altKey) {

array.push("alt");

};

if (event.metaKey) {

array.push("meta");

};

};

function showArray() {

var str = array.toString();

var newP = document.createElement("p");

newP.appendChild(document.createTextNode(str));

document.body.appendChild(newP);

timing = setTimeout(showArray, 1000);

}

相关元素

event.relatedTarget与event.target；

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;

}

}

鼠标按钮

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定义的，以后再讨论

更多的事件信息

detail属性

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

鼠标滚轮事件

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;

};

}

触摸设备

iOS和Android设备中：

不支持dblclick；

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

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

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

无障碍性问题

使用click事件执行代码；

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

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