快捷導(dǎo)航

JS自定義右鍵菜單實(shí)現(xiàn)代碼解析

更新時(shí)間：2020年07月16日 14:53:57 作者：網(wǎng)絡(luò)蟲(chóng)

這篇文章主要介紹了JS自定義右鍵菜單實(shí)現(xiàn)代碼解析,文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下

今天來(lái)講一個(gè)關(guān)于右鍵菜單的小demo，拋磚引玉。

首先，我們要用css和html做一個(gè)自定義右鍵菜單。

<!--自定義右鍵菜單html代碼-->
<div id="menu">
<div class="menu">功能1</div>
<div class="menu">功能2</div>
<div class="menu">功能3</div>
<div class="menu">功能4</div>
<div class="menu">功能5</div>
</div>

/*css代碼*/
#menu{
width: 0; /*設(shè)置為0 隱藏自定義菜單*/
height: 125px;
overflow: hidden; /*隱藏溢出的元素*/
box-shadow: 0 1px 1px #888,1px 0 1px #ccc;
position: absolute; /*自定義菜單相對(duì)與body元素進(jìn)行定位*/
}
.menu{
width: 130px;
height: 25px;
line-height: 25px;
padding: 0 10px;
}

現(xiàn)在我們已經(jīng)有了自定義菜單，還需要一個(gè)很重要的事件 contextmenu。

> contextmenu :當(dāng)你在頁(yè)面上右鍵點(diǎn)擊時(shí)，會(huì)觸發(fā)此事件，并會(huì)跳出瀏覽器自帶的右鍵菜單。

所以，我們要做的就是，在觸發(fā)contextmenu事件時(shí)，取消掉默認(rèn)行為(也就是阻止瀏覽器顯示自帶的菜單)

通過(guò)傳入的事件對(duì)象，來(lái)確定鼠標(biāo)的點(diǎn)擊位置，作為left和top的值來(lái)進(jìn)行元素的定位，并顯示自定義菜單

window.oncontextmenu=function(e){
//取消默認(rèn)的瀏覽器自帶右鍵 很重要?。?
e.preventDefault();

//獲取我們自定義的右鍵菜單
var menu=document.querySelector("#menu");

//根據(jù)事件對(duì)象中鼠標(biāo)點(diǎn)擊的位置，進(jìn)行定位
menu.style.left=e.clientX+'px';
menu.style.top=e.clientY+'px';

//改變自定義菜單的寬，讓它顯示出來(lái)
menu.style.width='125px';
}
//關(guān)閉右鍵菜單，很簡(jiǎn)單
window.onclick=function(e){

//用戶觸發(fā)click事件就可以關(guān)閉了，因?yàn)榻壎ㄔ趙indow上，按事件冒泡處理，不會(huì)影響菜單的功能
　　　　document.querySelector('#menu').style.height=0;
}

這里只是一個(gè)很簡(jiǎn)單的例子，contextmenu事件支持所有 HTML 元素，這意味者你可以給不同的元素，自定義不同的右鍵菜單，由于contextmenu事件會(huì)冒泡傳播，子節(jié)點(diǎn)上觸發(fā)的事件，在父節(jié)點(diǎn)上也會(huì)觸發(fā)，所以應(yīng)該調(diào)用對(duì)應(yīng)的函數(shù)或者設(shè)置對(duì)應(yīng)的屬性值來(lái)阻止事件冒泡。

根據(jù)事件對(duì)象來(lái)定位其實(shí)很復(fù)雜也很簡(jiǎn)單，除了clientY和clientX，鼠標(biāo)事件對(duì)象提供了一系列復(fù)雜的相關(guān)信息，諸如layerX,pageX等等，這些值并不直觀，還存在瀏覽器兼容問(wèn)題，不過(guò)clientX和clientY，可以說(shuō)是萬(wàn)金油屬性。

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: