1、右鍵選單觸發的基本程序
實作自定義右鍵選單我們首先需要了解以下內容：
瀏覽器默認的右鍵選單觸發的基本程序
- 單擊右鍵，選單出現
- 選單出現，滑鼠箭頭一直在選單左上角
- 再換個位置點擊右鍵，原選單消失，新選單出現在指定位置
- 點擊左鍵，中鍵，選單消失
以上為大致實作程序，不全面，僅供參考
也許文字過于抽象，我們來看看代碼吧：
2、HTML結構
<!--start右鍵選單的結構-->
<div id="rightmenu" class="rightmenu">
<ul>
<li disabled="disabled">
<a href="#">回傳(B)</a>
<span>Alt+向左箭頭</span></li>
<li><a href="#">前進(F)</a> <span>Alt+向右箭頭</span></li>
<li><a href="#">重新加載(R)</a> <span>Ctrl+R</span></li>
</ul>
<ul>
<li><a href="#">另存為(A)...</a> <span>Ctrl+S</span></li>
<li><a href="#">列印(P)..</a> <span>Ctrl+P</span></li>
<li><a href="#">投射(C)...</a> <span>Ctrl+R</span></li>
</ul>
<ul>
<li><a href="#">查看你個錘代碼(V)</a> <span>Ctrl+U</span></li>
<li><a href="#">檢查你個瓜皮(N)</a> <span>Ctrl+Shift+L</span></li>
</ul>
</div>
<!--end右鍵選單的結構-->
<div class="box"></div>3、CSS樣式
*{
margin: 0;
padding: 0;
}
li{
list-style: none;
}
.rightmenu{
width: 250px;
background: #fff;
border: 1px solid #bababa;
position: fixed;
box-sizing: border-box;
display: none;
}
.rightmenu ul{
border-bottom: 1px solid #e9e9e9;
}
.rightmenu ul li{
height: 30px;
line-height: 30px;
color: #000;
padding: 0 25px;
box-sizing: border-box;
margin: 2px 0;
cursor: default;
}
.rightmenu ul li:hover{
background: #ebebeb;
}
.rightmenu ul li a{
font-size: 12px;
color: #000;
cursor: default;
text-decoration: none;
}
.rightmenu ul li span{
float: right;
font-size: 12px;
color: #000;
}
.box{
width: 100px;
height: 100px;
background: red;
}.rightmenu設定display：none是因為右鍵選單本身是隱藏了因為點擊了才出現，倘若不加這句，選單會出現在頁面的左上角，
3、js實作程序
分析：
①：瀏覽器本身就有右鍵選單，我們也要做右鍵選單，所以應當阻止瀏覽器的右鍵,這里可以用到preventDefault()，這個方法有著阻止默認事件的功能，科普一下，什么是默認事件：
例如： 點我可以知道這是可以跳轉到百度的，所以是有個跳轉時間的，這個事件我們沒有去用js實作，他是默認的，所以稱之為默認事件，同理，瀏覽器右鍵選單，
②前面我們說了選單出現，滑鼠箭頭一直在選單左上角，這是怎么實作的呢，這涉及到event里面的事件發生坐標了，我們點擊的位置就是我們右鍵點擊事件發生的位置，可以用坐標來解釋這個位置，clientX(事件發生點和可視區域的位置)，offsetX(事件發生點和父級元素的位置)，pageX(事件發生點和頁面的位置)，screenX(事件發生點和螢屏的位置)，這里我們用offsetX/Y，因為我們是在BOW中點擊，所以具體原因大家百度一下就直道了，我們還是看代碼吧，代碼里標注的很詳細，
<script>
document.addEventListener('DOMContentLoaded',function(){
//獲取
var rightMenu=document.getElementById('rightmenu');
//1.首先將右鍵默認行為關閉
window.oncontextmenu=function(event){
event.preventDefault();
//2.設定右鍵行為
rightMenu.style.display="none";//重置已經block的選單
rightMenu.style.display="block";
rightMenu.style.left=event.offsetX+'px';
rightMenu.style.top=event.offsetY+'px';
}
//3.根據真實瀏覽器的右鍵來看左鍵是可以取消右鍵選單的
document.onclick=function(event){
rightMenu.style.display="none";
}
//4.功能并不完善,需要給每個li寫BOM事件,這里暫時不寫了
//5.仔細檢查你會發現當右鍵在自己定義的右鍵選單上時,會出現一點小情況,可以自己測驗
})
</script>以上僅供參考，更多的功能實作都是差不多的原理，好了，結束了，
轉載請註明出處，本文鏈接：https://www.uj5u.com/qianduan/298391.html
標籤：其他