js實現(xiàn)右鍵菜單功能
更新時間：2016年11月28日 08:34:59 作者：簡單成書
這篇文章主要為大家詳細(xì)介紹了js實現(xiàn)右鍵菜單功能,具有一定的參考價值，感興趣的小伙伴們可以參考一下
本文解決的問題：1、實現(xiàn)右鍵菜單功能代碼；2、阻止默認(rèn)事件的實際應(yīng)用。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>右鍵菜單</title>
<style type="text/css">
#menu {
position: fixed;
left:0;
top:0;
width:200px;
height: 400px;
background-color: blue;
display: none;
}
</style>
</head>
<body>
<div id="menu">
</div>
<script type="text/javascript">
var menu = document.getElementById("menu");
document.oncontextmenu = function(e) {
var e = e || window.event;
//鼠標(biāo)點的坐標(biāo)
var oX = e.clientX;
var oY = e.clientY;
//菜單出現(xiàn)后的位置
menu.style.display = "block";
menu.style.left = oX + "px";
menu.style.top = oY + "px";
//阻止瀏覽器默認(rèn)事件
return false;//一般點擊右鍵會出現(xiàn)瀏覽器默認(rèn)的右鍵菜單，寫了這句代碼就可以阻止該默認(rèn)事件。
}
document.onclick = function(e) {
var e = e || window.event;
menu.style.display = "none"
}
menu.onclick = function(e) {
var e = e || window.event;
e.cancelBubble = true;
}
// document.addEventListener("contextmenu",function(e){
// var e = e || window.event;
// e.preventDefault();
// alert("menu");
// },false)
</script>
</body>
</html>
以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
js實現(xiàn)拖拽效果（構(gòu)造函數(shù)）
這篇文章主要介紹了js利用構(gòu)造函數(shù)實現(xiàn)拖拽效果2015-12-12
JavaScript跳出循環(huán)的三種方法(break, return, continue)
這篇文章主要介紹了JavaScript跳出循環(huán)的三種方法(break, return, continue)，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-07-07
這篇文章主要介紹了2013-12-12
javascript網(wǎng)頁隨機點名實現(xiàn)過程解析
這篇文章主要介紹了javascript實現(xiàn)網(wǎng)頁隨機變色及實例,文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友可以參考下2019-10-10
下面小編就為大家?guī)硪黄唵握務(wù)刯s的數(shù)據(jù)類型。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-09-09
這篇文章主要為大家詳細(xì)介紹了微信小程序工具函數(shù)封裝，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2019-10-10
JS支持OCX控件的事件（event），當(dāng)OCX控件定義的事件發(fā)生時，JS可以捕獲該事件并對事件進(jìn)行相應(yīng)的處理2014-09-09
用來屏蔽鼠標(biāo)右鍵的代碼，破解方法也比較簡單。比較根本。禁掉js什么也運行不了。2009-12-12
JavaScript將字符串轉(zhuǎn)換為整數(shù)的方法
這篇文章主要介紹了JavaScript將字符串轉(zhuǎn)換為整數(shù)的方法,涉及javascript中parseInt函數(shù)的使用技巧,非常具有實用價值,需要的朋友可以參考下2015-04-04
JSON 對象是我們經(jīng)常使用的一種數(shù)據(jù)存儲對象,它的適用范圍非常廣,JSON.stringify 方法可以幫我們把一個對象或數(shù)組轉(zhuǎn)換成一個 JSON字符串,本文我們給大家詳細(xì)介紹一下JavaScript中JSON.stringify方法,需要的朋友可以參考下2023-09-09