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
WBOYoriginal
2016-05-16 16:43:391260parcourir

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>

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"; 
}; 
};


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; 
}

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....

Déclaration:
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