javascript局部自定義鼠標(biāo)右鍵菜單
更新時(shí)間：2020年12月08日 15:22:36 作者：小益的開發(fā)日記
這篇文章主要為大家詳細(xì)介紹了javascript局部自定義鼠標(biāo)右鍵菜單，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
本文實(shí)例為大家分享了js局部自定義鼠標(biāo)右鍵菜單的具體代碼，供大家參考，具體內(nèi)容如下
前言
html局部自定義鼠標(biāo)右鍵菜單
局部！
局部！
局部！
重要的關(guān)鍵詞說三遍！
一、效果展示
二、源代碼
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
#TextBox{
width: 200px;
height: 200px;
border: 1px solid #000;
}
#menu{
position: absolute;
border: 1px solid #000;
}
#menu > div:nth-child(2){
border-top: 1px solid #000;
}
#menu > div:nth-child(3){
border-top: 1px solid #000;
}
#menu > div:nth-child(4){
border-top: 1px solid #000;
}
#menu > div:hover{
cursor: pointer;
background-color: #0078E7;
}
</style>
</head>
<body>
<div id="TextBox">
<div id="menu">
<div>自定義菜單</div>
<div>1</div>
<div>2</div>
<div>3</div>
</div>
</div>
<script type="text/javascript">
window.onload = function(){
var TextBox = document.getElementById("TextBox");
var ul = document.getElementById("menu"); //獲取ul節(jié)點(diǎn)對象
ul.style.display = "none";
/*為document綁定鼠標(biāo)右鍵菜單事件*/
TextBox.oncontextmenu = function(e){
var _event = window.event||e; //事件對象
var x = _event.clientX; // 鼠標(biāo)的x坐標(biāo)
var y = _event.clientY; //鼠標(biāo)的y坐標(biāo)
ul.style.display = "block";
ul.style.left = x + "px"; //改變ul的坐標(biāo)
ul.style.top = y + "px";
//阻止默認(rèn)行為
if(_event.preventDefault){
_event.preventDefault(); //標(biāo)準(zhǔn)格式
}else{
_event.returnValue = false; //IE格式
}
}
TextBox.onclick = function(){
ul.style.display = "none";
}
}
</script>
</body>
</html>
總結(jié)
以上就是html局部自定義鼠標(biāo)右鍵菜單的方式。
以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
Linux下編譯安裝php libevent擴(kuò)展實(shí)例
這篇文章主要介紹了Linux下編譯安裝php libevent擴(kuò)展實(shí)例,本文著重講解了編譯過程中一個(gè)錯(cuò)誤解決方法,需要的朋友可以參考下2015-02-02
js 用CreateElement動(dòng)態(tài)創(chuàng)建標(biāo)簽示例
用CreateElement動(dòng)態(tài)創(chuàng)建標(biāo)簽，主要是html中常用的一些標(biāo)簽，在本文有詳細(xì)的示例，喜歡的朋友可以參考下2013-11-11
js數(shù)值計(jì)算時(shí)使用parseInt進(jìn)行數(shù)據(jù)類型轉(zhuǎn)換(jquery)
這篇文章主要介紹了js數(shù)值計(jì)算時(shí)使用parseInt進(jìn)行數(shù)據(jù)類型轉(zhuǎn)換(jquery),需要的朋友可以參考下2014-10-10
使用JSX 建立組件 Parser（解析器）開發(fā)的示例
這篇文章主要介紹了使用JSX 建立組件 Parser（解析器）開發(fā)的示例（前端組件化）本文重點(diǎn)講述我們?nèi)绾螐?開始搭建一個(gè)組件系統(tǒng)，基于標(biāo)記語言的Parser的一種風(fēng)格2021-04-04
Bower 是 twitter 推出的一款包管理工具，基于nodejs的模塊化思想，把功能分散到各個(gè)模塊中，讓模塊和模塊之間存在聯(lián)系，通過 Bower 來管理模塊間的這種聯(lián)系,本文給大家介紹bower依賴包管理工具，感興趣的朋友一起學(xué)習(xí)2016-03-03
cookie在javascript中的使用技巧以及隱私在服務(wù)器端的設(shè)置
cookie在javascript中的使用技巧，需要的朋友可以參考下2012-12-12
瀑布流主要應(yīng)用在圖片展示頁面上。如果有一大批圖片需要展示，原始圖片尺寸不一致，又希望每張圖片都能不剪裁，完整顯示，那么就要給圖片規(guī)定一個(gè)寬度，解放它們的高度。利用網(wǎng)頁高度不限這個(gè)特性，充分利用頁面的空間，盡可能的展示多的圖片。下面我們就來詳細(xì)探討下2015-05-05
微信小程序?qū)崿F(xiàn)打開內(nèi)置地圖功能【附源碼下載】
這篇文章主要介紹了微信小程序?qū)崿F(xiàn)打開內(nèi)置地圖功能,涉及微信小程序使用wx.openLocation函數(shù)獲取經(jīng)緯度信息的相關(guān)使用技巧,并附帶源碼供讀者下載參考,需要的朋友可以參考下2017-12-12
這篇文章主要為大家詳細(xì)介紹了微信小程序?qū)崿F(xiàn)炫酷的彈出式菜單特效，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2019-01-01
IE11下CKEditor在Bootstrap Modal中下拉問題的解決
這篇文章主要介紹了IE11下CKEditor在Bootstrap Modal中下拉問題的解決方法，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2019-09-09