Event事件之事件鼠標右鍵——案例：實現自定義一個右鍵菜單
鼠標右鍵
contextmenu 鼠標右鍵事件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script>
document.addEventListener('contextmenu', function(){
alert("鼠標右鍵事件");
});
</script>
</body>
</html>
在瀏覽器上鼠標右鍵，先顯示"鼠標右鍵事件"對話框，後顯示默認鼠標右鍵菜單。
案例：實現自定義一個右鍵菜單
注意：需要阻止默認行爲，否則會彈出瀏覽器默認右鍵菜單！
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
/* 情況默認樣式 */
*{
margin: 0;
padding: 0;
list-style: none;
}
ul{
width: 200px;
border: 1px solid #000;
position: absolute;
top: 0;
left: 0;
display: none;
}
li{
padding: 10px;
border: 1px solid #333;
}
</style>
</head>
<body style="height: 3000px;">
<ul>
<li>刷新</li>
<li>跳轉</li>
<li>加載</li>
<li>首頁</li>
</ul>
<script>
{
var ul = document.querySelector('ul');
document.addEventListener("contextmenu", (e)=>{
ul.style.display = 'block';
let x = e.pageX;
let y = e.pageY;
ul.style.left = x + 'px';
ul.style.top = y + 'px';
e.preventDefault();
});
}
</script>
</body>
</html>
另外一種阻止默認行爲的方式
var ul=document.querySelector('ul');
// 自定義一個右鍵菜單
// contextmenu 鼠標右鍵事件
document.addEventListener('contextmenu',function(e){
// 顯示列表
ul.style.display='block';
// 鼠標位置
var x=e.pageX;
var y=e.pageY;
ul.style.left=x+'px';
ul.style.top=y+'px';
// e.preventDefault()
return false;
})
我們發現其實並沒有阻止默認行爲。
那麼我們試試在默認的事件中寫：
{
var ul = document.querySelector('ul');
document.oncontextmenu = (e)=>{
ul.style.display = 'block';
let x = e.pageX;
let y = e.pageY;
ul.style.left = x + 'px';
ul.style.top = y + 'px';
return false;
};
}
這顯然就成功了。
e.preventDefault與return false阻止默認行爲的區別
preventDefault：
阻止瀏覽器默認行爲 - 標準方法
return false：
在低版本瀏覽器是起效果的，但是在高版本瀏覽器中是沒有作用的，因此建議使用 e.preventDefault()
注意：在事件綁定中 return false 無法實現取消默認行爲功能，它只能在直接添加事件的方法下使用。
（後續待補充）