Cet article organise les points clés des « événements de focus, de souris et de molette » sous « Type d'événement » dans les événements JavaScript et les partage avec vous pour votre référence. Le contenu spécifique est le suivant
.1. Focus sur les événements
Généralement, ces événements sont utilisés conjointement avec la méthode document.hasFocus() et la propriété document.activeElement. Incluent principalement :
window.onfocus = function () {
console.log('focus'); //focus
console.log(document.hasFocus()); //True
}
window.onblur = function () {
console.log('blur'); //blur
console.log(document.hasFocus()); //False
}
2. Événements de souris 9 événements de souris sont définis dans les événements DOM niveau 3 :
cliquez
Il y a un bug dans les versions antérieures à IE8. Dans l'événement double-clic, les deuxièmes événements mousedown et click seront ignorés
div.onmouseover = function() {
console.log('mouseover'); //在子元素上会触发
}
div.onmouseout = function() {
console.log('mouseout'); //在子元素上会触发
}
div.onmouseenter = function() {
console.log('mouseenter'); //在子元素上不会触发
}
div.onmouseleave = function() {
console.log('mouseleave'); //在子元素上不会触发
}
1. La zone client coordonne la position des attributs clientX et clientY
Par exemple :
2. Positions des coordonnées de page pageX et pageY
Cette position des coordonnées de page n'est pas prise en charge dans IE8 et les versions antérieures. Elle peut être calculée en utilisant les attributs scrollLeft et scrollTop dans document.body en mode mixte et document.documentElement en mode standard :
3. Positions des coordonnées de l'écran screenX et screenY
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);
};
Les touches de modification incluent Shift, Ctrl, Alt et Meta (touche Windows sous Windows, touche Cmd sur Mac) ; les états des touches de modification correspondantes sont shiftKey, ctrlKey, altKey et metaKey. Ces attributs contiennent des valeurs booléennes, vraies si. la touche correspondante est enfoncée, false sinon. Tel que :
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);
};
5. Éléments associés
if (clickX === undefined) {
clickX = event.clientX + (document.body.scrollLeft || document.documentElement.scrollLeft);
};
if (clickY === undefined) {
clickY = event.clientY + (document.body.scrollTop || document.documentElement.scrollTop);
};
et
event.targetL'attribut RelatedTarget fournit des informations sur les éléments associés. Cet attribut contient uniquement des valeurs pour les événements mouseover et mouseout ; pour les autres événements, la valeur est nulle ; les versions antérieures à IE8 ne prennent pas en charge l'attribut RelatedTarget. Lorsque l'événement mouseover est déclenché, les éléments pertinents sont enregistrés dans l'attribut fromElement d'IE. lorsque l'événement mouseout est déclenché, les éléments pertinents sont stockés dans l'attribut toElement d'IE.
Par exemple :
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);
}
Par exemple :
四、鼠标按钮
1、button属性
DOM的event.button属性有三个值：0为主鼠标按钮、1为中间鼠标按钮、2为次鼠标按钮。在常规设置中，主鼠标按钮就是鼠标左键；次鼠标按钮就是鼠标右键。
IE8及之前的版本也提供了button属性，但这个属性的值与DOM的button属性有很大差异：
兼容版：
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设备中：
5、无障碍性问题
以上就是本文的全部内容，希望对大家的学习有所帮助。
![[Web front-end] Démarrage rapide de Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
