Maison > interface Web > js tutoriel > Principe de mise en œuvre et code source des compétences du bouton droit de la souris personnalisé js_javascript

Principe de mise en œuvre et code source des compétences du bouton droit de la souris personnalisé js_javascript

WBOY
Libérer: 2016-05-16 16:43:39
original
1282 Les gens l'ont consulté

Aujourd'hui, enregistrons js pour personnaliser le bouton droit de la souris. Décomposons également son principe de mise en œuvre :

1. Bloquez l'événement par défaut du clic droit ; (à un moment donné, je pensais que la modification était l'événement par défaut)

2. Cacher un ul; (je pensais un jour de manière pédante que tous les divs dignes d'une telle opération sont des divs)

3. En réponse au clic droit de la souris, l'ul caché s'affiche

4. Après avoir cliqué à nouveau sur la souris, ul est à nouveau masqué

En regardant les choses de cette façon, ce que nous devons faire est beaucoup plus simple. Commençons par le code :

partie HTML

<ul id="testRight" style="width: 100px;background-color: yellow;position: absolute;z-index: 100;"> 
<li><a href="#">开始</a></li> 
<li><a href="#">暂停</a></li> 
<li><a href="#">拜拜</a></li> 
</ul>
Copier après la connexion

partie javascript :

window.onload=function(){ 
var forRight=document.getElementById("testRight");//获取对象,现在太熟悉了 
forRight.style.display="none"; 
var title=forRight.getElementsByTagName("li"); 

for(var i=0;i<title.length;i++){ 
title[i].onmouseover=function(){ 
this.classname="active";//其实这里我们也可以调用其他事件吧 
}; 
title[i].onmouseout=function(){//这里也是鼠标的两个事件吧 
this.classname=""; 
}; 
} 

document.oncontextmenu=function(event){//这是实现的关键点 
var event=event||window.event;//这个都不是问题了吧 
forRight.style.display="block"; 
forRight.style.left=event.clientX+"px"; 
forRight.style.top=event.clientY+"px";//鼠标的坐标啊 
return false;//这里返回false就是为了屏蔽默认事件 
}; 
document.onclick=function(){//就是为了更形象的模仿啊 
forRight.style.display="none"; 
}; 
};
Copier après la connexion


Regardons d'abord la partie la plus critique de l'enregistrement d'aujourd'hui : si l'événement document.oncontextmenu renvoie false, cela signifie bloquer l'événement par défaut. Si nous n'écrivons rien d'autre, nous écrivons uniquement return dans cet événement, comme suit
.

document.oncontextmenu=function(){ 
return false; 
}
Copier après la connexion

Dans ce cas, il n'y aura aucune réponse lorsque vous cliquerez à nouveau avec le bouton droit. Revenez ensuite en arrière et regardez l'ensemble de l'application événementielle. Il semble qu'à l'exception de cet événement, les autres soient des événements relativement familiers, mais l'intégration des événements fait toujours défaut. La clé est que l'idée est créative, mais je m'en fiche. à ce sujet pour l'instant, finissons-en d'abord, mais je veux lire trois mille poèmes par cœur, pas pour les écrire, juste pour les chanter. Pas Zama, pas Zama, pas Zama....

Étiquettes associées:
source:php.cn
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal