阻止預設行為 和 定製滑鼠右鍵選單
阿新 • • 發佈：2021-07-29
<!DOCTYPEhtml>
<htmllang="en">
<head>
<metacharset="UTF-8">
<metahttp-equiv="X-UA-Compatible"content="IE=edge">
<metaname="viewport"content="width=device-width,initial-scale=1.0">
<title>Document</title>
<style>
html,body{
height:100%;
width:100%;
}
.contextmenu{ position:fixed; top:0; left:0; z-index:999; }
.contextmenuul{ box-sizing:border-box; width:150px; border:1pxsolid#AAA;; }
.contextmenuulli{ height:30px; line-height:30px; padding:05px; cursor:pointer; }
.contextmenuulli:hover{ background:lightblue; }
.box{ margin:1500pxauto; width:100px; height:100px; background-color:lightcoral; } </style> </head> <body> <!--<divclass="contextmenu"> <ul> <li>跳轉到首頁</li> <li>進入詳情</li> <li>逗你玩</li> </ul> </div>-->
<!--<ahref="#box"id="link">哈哈</a> <divclass="box"id="box"></div>-->
<!--1阻止預設行為--> <ahref="javascript:;">哈哈</a> <ahref="https://www.baidu.com/"id="link">哈哈</a>
<scriptsrc="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.js"></script> <script> /** *預設行為: * *可以基於ev.prevetDefault()來禁用預設行為 */
/** *a標籤的預設行為 *+頁面跳轉 *+錨點定位 **/ //阻止預設行為 letlink=document.getElementById('link'); link.onclick=function(ev){ ev.preventDefault(); //returnfalse; } //禁用右鍵選單(後續可以改為自己的選單) window.oncontextmenu=function(ev){ //阻止預設行為禁用自帶右側選單 ev.preventDefault(); //console.log(ev);
//沒有右鍵選單則建立一個 letcontextmenu=document.querySelector('.contextmenu'); if(!contextmenu){ contextmenu=document.createElement('div'); contextmenu.className="contextmenu"; contextmenu.innerHTML=` <ul> <li>跳轉到首頁</li> <li>進入詳情</li> <li>逗你玩</li> </ul> `; document.body.appendChild(contextmenu); }
//控制右鍵選單位置 contextmenu.style.left=`${ev.clientX+10}px`; contextmenu.style.top=`${ev.clientY+10}px`; }
//點選其它內容(不包含contextmenu及裡面的內容)讓右鍵選單消失 window.onclick=function(ev){ lettarget=ev.target, targetTag=target.tagName;
//點選contextmenu不做任何處理 if(targetTag==='LI'){ target=target.parentNode, targetTag=target.tagName; } if(targetTag==='UL'&&target.parentNode.className==='contextmenu'){ return; }
//移除右側選單 letcontextmenu=document.querySelector('.contextmenu'); if(contextmenu){ document.body.removeChild(contextmenu); } } </script>
</body> </html> 我是Eric,手機號是13522679763
.contextmenu{ position:fixed; top:0; left:0; z-index:999; }
.contextmenuul{ box-sizing:border-box; width:150px; border:1pxsolid#AAA;; }
.contextmenuulli{ height:30px; line-height:30px; padding:05px; cursor:pointer; }
.contextmenuulli:hover{ background:lightblue; }
.box{ margin:1500pxauto; width:100px; height:100px; background-color:lightcoral; } </style> </head> <body> <!--<divclass="contextmenu"> <ul> <li>跳轉到首頁</li> <li>進入詳情</li> <li>逗你玩</li> </ul> </div>-->
<!--<ahref="#box"id="link">哈哈</a> <divclass="box"id="box"></div>-->
<!--1阻止預設行為--> <ahref="javascript:;">哈哈</a> <ahref="https://www.baidu.com/"id="link">哈哈</a>
<scriptsrc="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.js"></script> <script> /** *預設行為: * *可以基於ev.prevetDefault()來禁用預設行為 */
/** *a標籤的預設行為 *+頁面跳轉 *+錨點定位 **/ //阻止預設行為 letlink=document.getElementById('link'); link.onclick=function(ev){ ev.preventDefault(); //returnfalse; } //禁用右鍵選單(後續可以改為自己的選單) window.oncontextmenu=function(ev){ //阻止預設行為禁用自帶右側選單 ev.preventDefault(); //console.log(ev);
//沒有右鍵選單則建立一個 letcontextmenu=document.querySelector('.contextmenu'); if(!contextmenu){ contextmenu=document.createElement('div'); contextmenu.className="contextmenu"; contextmenu.innerHTML=` <ul> <li>跳轉到首頁</li> <li>進入詳情</li> <li>逗你玩</li> </ul> `; document.body.appendChild(contextmenu); }
//控制右鍵選單位置 contextmenu.style.left=`${ev.clientX+10}px`; contextmenu.style.top=`${ev.clientY+10}px`; }
//點選其它內容(不包含contextmenu及裡面的內容)讓右鍵選單消失 window.onclick=function(ev){ lettarget=ev.target, targetTag=target.tagName;
//點選contextmenu不做任何處理 if(targetTag==='LI'){ target=target.parentNode, targetTag=target.tagName; } if(targetTag==='UL'&&target.parentNode.className==='contextmenu'){ return; }
//移除右側選單 letcontextmenu=document.querySelector('.contextmenu'); if(contextmenu){ document.body.removeChild(contextmenu); } } </script>
</body> </html> 我是Eric,手機號是13522679763