文章目錄
- 示例
- 參考
示例
設計思路：
- 禁用原始滑鼠右鍵選單；
- 使用 HTML 元素搭建一個選單串列，并回應滑鼠點擊事件，
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Custom Context Menu</title>
<style type="text/css">
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
body {
background-color: gainsboro;
}
.context-menu {
background-color: rgba(240, 240, 240, 1);
border-color: rgba(0, 0, 0, 0.4);
border-style: solid;
border-width: 1px;
box-shadow: 2px 2px 2px 1px rgba(0, 0, 0, 0.2);
padding: 4px;
position: fixed;
width: 200px;
}
.context-menu-item {
--height: 30px;
cursor: pointer;
height: var(--height);
line-height: var(--height);
list-style: none;
padding-left: 5px;
vertical-align: middle;
transition-duration: 0.8s;
transition-property: background-color;
user-select: none;
}
.context-menu-item:hover {
background-color: rgba(255, 255, 255, 1);
}
p {
margin: 10px;
}
</style>
</head>
<body>
<p>
<span>The oncontextmenu property of the GlobalEventHandlers mixin is an event handler that processes contextmenu events.</span>
<br>
<span>The contextmenu event typically fires when the right mouse button is clicked on the window. Unless the default behavior is prevented, the browser context menu will activate.</span>
</p>
<p>
<span>The onm ouseup property of the GlobalEventHandlers mixin is an event handler that processes mouseup events.</span>
<br>
<span>The mouseup event fires when the user releases the mouse button.</span>
</p>
<p>
<span>In an HTML document, the document.createElement() method creates the HTML element specified by tagName, or an HTMLUnknownElement if tagName isn't recognized.</span>
</p>
</body>
<script type="text/javascript">
// 滑鼠左、右鍵標志，參考：https://developer.mozilla.org/en-US/docs/Web/API/MouseEvent/MouseEvent
const MOUSE_LEFT_BUTTON = 0
const MOUSE_RIGHT_BUTTON = 2
window.onload = (event) => {
console.log(event);
main();
}
function main() {
let menu = null;
window.oncontextmenu = (event) => { // 禁用原始滑鼠右鍵選單
// console.log(event);
// event.preventDefault();
return false;
}
document.onmouseup = (event) => {
console.log(event);
// console.log(event.clientX, event.clientY);
if(event.button === MOUSE_RIGHT_BUTTON) { // 滑鼠右鍵
if(menu !== null) {
document.body.removeChild(menu); // 移除選單
}
menu = document.createElement("ul"); // 選單
menu.className = "context-menu";
menu.style.top = event.clientY + "px";
menu.style.left = event.clientX + "px";
const item0 = document.createElement("li"); // 選單子項 0
item0.innerText = "個性化";
item0.className = "context-menu-item";
const item1 = document.createElement("li"); // 選單子項 1
item1.innerText = "顯示設定";
item1.className = "context-menu-item";
menu.appendChild(item0); // 添加選單子項
menu.appendChild(item1);
document.body.appendChild(menu); // 添加（展現）選單
} else if(event.button === MOUSE_LEFT_BUTTON) { // 滑鼠左鍵
if(menu !== null) {
document.body.removeChild(menu); // 移除選單
menu = null;
}
const target = event.target; // 獲取被滑鼠左鍵點擊的目標
if(target.className === "context-menu-item") {
alert(target.innerText);
}
}
}
document.onmousedown = (event) => {
// console.log(event);
}
}
</script>
</html>
參考
js滑鼠右鍵點擊事件
Web technology for developers > Web APIs > GlobalEventHandlers > GlobalEventHandlers.oncontextmenu
Web technology for developers > Web APIs > GlobalEventHandlers > GlobalEventHandlers.onmouseup
Web technology for developers > Web APIs > Document > Document.createElement()
Web technology for developers > Web APIs > Node > Node.removeChild()
Web technology for developers > Web APIs > HTMLElement > HTMLElement.style
Web technology for developers > Web APIs > Node > Node.appendChild()
Web technology for developers > Web APIs > MouseEvent > MouseEvent()
Web technology for developers > HTML: HyperText Markup Language > HTML elements reference > ul: The Unordered List element
Web technology for developers > Web APIs > HTMLUListElement
Web technology for developers > HTML: HyperText Markup Language > HTML elements reference > li: The List Item element
Web technology for developers > Web APIs > HTMLLIElement
Web technology for developers > CSS: Cascading Style Sheets > list-style
Web technology for developers > Web APIs > Element > Element.className
Web technology for developers > CSS: Cascading Style Sheets > transition
轉載請註明出處，本文鏈接：https://www.uj5u.com/qianduan/352237.html
標籤：其他
上一篇：JavaScript異步編程