js 사용자 정의 마우스 오른쪽 버튼_javascript 기술의 구현 원리 및 소스 코드

오늘은 마우스 오른쪽 버튼을 맞춤설정하는 js를 기록해 보겠습니다. 구현 원리도 분석해 보겠습니다.

1. 마우스 오른쪽 버튼 클릭 기본 이벤트를 차단합니다. (한때 수정이 기본 이벤트인 줄 알았습니다.)

2. ul 숨기기(저는 그런 작업을 수행할 수 있는 모든 div가 div라고 현학적으로 생각한 적이 있습니다.)

3. 마우스 오른쪽 버튼을 클릭하면 숨겨진 ul이 표시됩니다.

4. 다시 마우스를 클릭하면 ul이 다시 숨겨집니다

이렇게 보면 우리가 해야 할 일은 훨씬 간단합니다. 코드부터 시작해 보겠습니다.

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>

자바스크립트 부분:

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

오늘 기록에서 가장 중요한 부분을 먼저 살펴보겠습니다. document.oncontextmenu 이벤트가 false를 반환하면 기본 이벤트를 차단한다는 의미입니다. 다른 내용을 쓰지 않으면 다음과 같이 이 이벤트에 return만 씁니다.

document.oncontextmenu=function(){ 
return false; 
}

이 경우 다시 마우스 오른쪽 버튼을 클릭해도 반응이 없습니다. 그런 다음 돌아가서 전체 이벤트 응용 프로그램을 살펴보십시오. 이 이벤트를 제외하고 다른 이벤트는 비교적 친숙한 이벤트인 것 같지만 이벤트의 통합이 항상 부족하다는 것이 핵심입니다. 지금은 일단 끝내자. 하지만 나는 시 3000편을 쓰기 위해서가 아니라 그냥 외우기 위해 외우고 싶다. 자마스텝, 자마스텝, 자마스텝....