JavaScript實現(xiàn)點擊自制菜單效果
更新時間：2021年02月02日 08:34:04 作者：~噓~禁止想象~
這篇文章主要為大家詳細(xì)介紹了JavaScript實現(xiàn)點擊自制菜單效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下
本文實例為大家分享了JavaScript實現(xiàn)點擊自制菜單效果的具體代碼，供大家參考，具體內(nèi)容如下
應(yīng)用場景：當(dāng)我們希望用戶再點擊右鍵的時候不希望彈出瀏覽器的默認(rèn)菜單時，需要阻止瀏覽器默認(rèn)行為，并執(zhí)行我們想要的效果
第一種方式，通過創(chuàng)建元素的方式
<!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>
body {
height: 3000px;
}
.menu {
width: 100px;
height: 280px;
background-color: red;
position: absolute;
left: 0;
top: 0;
display: none;
}
</style>
</head>
<body>
<script>
var Bon = true;
var menu = null;
document.oncontextmenu = function(event) {
if (Bon) {
menu = document.createElement("div");
menu.classList.add("menu");
document.body.appendChild(menu);
menu.style.left = event.pageX + "px";
menu.style.top = event.pageY + "px";
menu.style.display = "block";
Bon = false;
event.preventDefault();
} else {
menu.style.left = event.pageX + "px";
menu.style.top = event.pageY + "px";
event.preventDefault();
}
}
document.onmousedown = function(e) {
if (e.button == 0) {
var menu = document.querySelector(".menu");
document.body.removeChild(menu);
Bon = true;
}
}
</script>
</body>
</html>
第二種：通過隱藏元素的方式
<div class="menu"></div>
<script>
var menu = document.querySelector(".menu");
document.oncontextmenu = function(event) {
menu.style.left = event.pageX + "px";
menu.style.top = event.pageY + "px";
menu.style.display = "block";
event.preventDefault();
}
document.onmousedown = function(e) {
if (e.button == 0) {
menu.style.display = "none";
}
}
</script>
當(dāng)我們點擊右鍵時就不會彈出默認(rèn)的菜單了，彈出了我設(shè)置的紅框框。
以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
您可能感興趣的文章:
相關(guān)文章
這篇文章主要為大家介紹了JavaScript BOM構(gòu)成和常用事件，具有一定的參考價值，感興趣的小伙伴們可以參考一下，希望能夠給你帶來幫助2021-12-12
Invalid?Host?header問題該如何解決的幾種方式
Invalid Host header是一個常見的錯誤信息,通常發(fā)生在Web應(yīng)用程序中,下面這篇文章主要給大家介紹了關(guān)于Invalid?Host?header問題該如何解決的幾種方式,需要的朋友可以參考下2024-09-09
這篇文章主要給大家介紹了7道關(guān)于JS this的面試題，來看看你能答對幾個，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2021-03-03
這篇文章主要介紹了正則表達(dá)式基本語法及表單驗證操作,較為詳細(xì)的分析了正則表達(dá)式的基本語法以及基于JS實現(xiàn)的表單正則驗證操作相關(guān)實現(xiàn)技巧,需要的朋友可以參考下2017-04-04
這篇文章整理了JavaScript文件上傳的常見問題，文中通過示例代碼介紹的非常詳細(xì)。對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值，需要的朋友可以參考下2022-06-06
js實現(xiàn)小球在頁面規(guī)定的區(qū)域運動
這篇文章主要為大家詳細(xì)介紹了js控制小球在規(guī)定范圍運動，碰到邊界就改變運動方向，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2020-06-06
javascript 設(shè)計模式之享元模式原理與應(yīng)用詳解
這篇文章主要介紹了javascript 設(shè)計模式之享元模式,結(jié)合實例形式詳細(xì)分析了javascript 設(shè)計模式之享元模式相關(guān)概念、原理、應(yīng)用方法及操作注意事項,需要的朋友可以參考下2020-04-04
這篇文章主要介紹了前端精度丟失問題解決之后端Long類型到前端的處理策略,在Web開發(fā)中前后端數(shù)據(jù)類型不匹配尤其是Long類型數(shù)據(jù)到前端可能導(dǎo)致精度丟失,文章探討了此問題并提供三種解決方法,需要的朋友可以參考下2024-09-09
基于Arcgis for javascript實現(xiàn)百度地圖ABCD marker的效果
本篇文章由腳本之家小編給大家分享的基于Arcgis for javascript實現(xiàn)百度地圖ABCD marker的效果，需要的朋友一起學(xué)習(xí)吧2015-09-09
這篇文章主要介紹了Select下拉框模糊查詢功能實現(xiàn)代碼的相關(guān)資料,非常不錯，具有參考借鑒價值，需要的朋友可以參考下2016-07-07