js 右鍵菜單
阿新 • • 發佈：2017-10-13
sna head center 獲取 右鍵事件 borde 位置 記錄 script
<!doctype html> <html> <head> <meta charset="utf-8"> <title>網頁右鍵菜單</title> <!-- 思路： 1.寫出右鍵點擊事件； 2.寫出菜單功能； 3.關聯右鍵功能和菜單，學習使用定位 --> <style> #test { width:200px; height:200px; background-color:green; } ul.context-menu { padding:0; margin:0; display:none; position:absolute;/*只能是absolute或fixed*/ } ul.context-menu li { list-style:none; width:100px; height:20px; line-height:20px; text-align:center; border:solid 1px; background-color:#CCC; display:block; } ul.context-menu li:hover { background-color:#C0C0C0; cursor:context-menu; } </style> <script> //var t = document.getElementById("test"); window.onload = function(){ var clicked_ele;//全局變量，用於記錄被右鍵單擊呼出菜單的元素 //去掉默認的contextmenu事件，否則會和右鍵事件同時出現。 document.getElementById("test").oncontextmenu = function(e){ e.preventDefault(); }; document.getElementById("ct").oncontextmenu = function(e){ e.preventDefault(); }; document.getElementById("test").onmousedown = function(e){ if(e.button ==2){//右鍵 var x = e.clientX;//獲取鼠標單擊點的X坐標 var y = e.clientY;//獲取鼠標單擊點的Y坐標 //設置菜單的位置 document.getElementById("ct").style.left = x + "px"; document.getElementById("ct").style.top = y + "px"; document.getElementById("ct").style.display = "block"; clicked_ele = this; }else if(e.button ==0){ //左鍵 document.getElementById("ct").style.display = "none"; }else if(e.button ==1){ //按下滾輪 document.getElementById("ct").style.display = "none"; } } document.getElementById("test").onblur = function(e){ document.getElementById("ct").style.display = "none"; } //給每個菜單項添加事件處理 var items = document.getElementsByClassName("context-menu-item"); for(var i=0; i < items.length; i++){ //在定義onclick事件之前，c必須設置取消test元素的onblur事件，否則onclick事件失效，因為click先觸發的是test元素的onblur事件，該事件有移除菜單的操作，才會導致後面的代碼失效 items.item(i).onmouseover = function(e){ document.getElementById("test").onblur = undefined; } //鼠標移出菜單時，還是要將test的onblur事件還原 items.item(i).onmouseleave = function(e){ document.getElementById("test").onblur = function(e){ document.getElementById("ct").style.display = "none"; } } items.item(i).onclick = function(e){ e.stopPropagation();//為避免引起其它錯誤，阻止冒泡很重要 console.log(this.innerHTML + ":" + clicked_ele.innerHTML); document.getElementById("ct").style.display = "none"; } } } </script> </head> <body> <ul class="context-menu" id="ct"> <li class="context-menu-item">option1</li> <li class="context-menu-item">option2</li> <li class="context-menu-item">option3</li> </ul> <div id="test" tabindex="2">我是美膩大方的綠方塊</div> </body> </html>
js 右鍵菜單