JavaScript 對(duì)任意元素,自定義右鍵菜單的實(shí)現(xiàn)方法
一、一些概念:
1、鼠標(biāo)事件有一個(gè)botton屬性:返回一個(gè)整數(shù),用于表示點(diǎn)擊的是哪個(gè)鼠標(biāo)按鍵。
BUG:在IE和標(biāo)準(zhǔn)DOM的鼠標(biāo)事件中,唯一一個(gè)button屬性值相同的是“單擊右鍵”事件,都返回2。
2、事件onmousedown:表示鼠標(biāo)按鍵按下的動(dòng)作。
事件oncontextmenu:點(diǎn)擊鼠標(biāo)觸發(fā)的另一個(gè)事件。
3、中斷默認(rèn)事件處理函數(shù)的方法:IE中設(shè)置returnValue=false; 標(biāo)準(zhǔn)DOM中調(diào)用preventDefault()方法。
4、事件對(duì)象:①在IE中,事件對(duì)象是window對(duì)象的一個(gè)event屬性。
聲明:
②在標(biāo)準(zhǔn)DOM中,事件對(duì)象是事件處理函數(shù)的唯一參數(shù)。
聲明:
解決兼容性:
二、實(shí)現(xiàn):
HTML:
<p id="p1">Uncle Cat is a fat white cat !</p>
<div id="d1">
<a>剪切</a>
<a>復(fù)制</a>
<a>粘貼</a>
</div>
javascript:
window.onload=function(){
rightmenu('p1','d1');
}
/****
* 封裝右鍵菜單函數(shù):
* elementID 要自定義右鍵菜單的 元素的id
* menuID 要顯示的右鍵菜單DIv的 id
*/
function rightmenu(elementID,menuID){
var menu=document.getElementById(menuID); //獲取菜單對(duì)象
var element=document.getElementById(elementID);//獲取點(diǎn)擊擁有自定義右鍵的 元素
element.onmousedown=function(aevent){ //設(shè)置該元素的 按下鼠標(biāo)右鍵右鍵的 處理函數(shù)
if(window.event)aevent=window.event; //解決兼容性
if(aevent.button==2){ //當(dāng)事件屬性button的值為2時(shí),表用戶按下了右鍵
document.oncontextmenu=function(aevent){
if(window.event){
aevent=window.event;
aevent.returnValue=false; //對(duì)IE 中斷 默認(rèn)點(diǎn)擊右鍵事件處理函數(shù)
}else{
aevent.preventDefault(); //對(duì)標(biāo)準(zhǔn)DOM 中斷 默認(rèn)點(diǎn)擊右鍵事件處理函數(shù)
};
};
menu.style.cssText='display:block;top:'+aevent.clientY+'px;'+'left:'+aevent.clientX+'px;'
//將菜單相對(duì) 鼠標(biāo)定位
}
}
menu.onmouseout=function(){ //設(shè)置 鼠標(biāo)移出菜單時(shí) 隱藏菜單
setTimeout(function(){menu.style.display="none";},400);
}
}
相關(guān)文章
實(shí)現(xiàn)JavaScript的組成----BOM和DOM詳解
下面小編就為大家?guī)?lái)一篇實(shí)現(xiàn)JavaScript的組成----BOM和DOM詳解。小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考,一起跟隨小編過(guò)來(lái)看看吧2016-05-05Javascript & DHTML 實(shí)例編程(教程)基礎(chǔ)知識(shí)
Javascript & DHTML 實(shí)例編程(教程)基礎(chǔ)知識(shí)...2007-06-06JavaScript CSS 修改學(xué)習(xí)第四章 透明度設(shè)置
今天我打算使用一些元素的透明度設(shè)置來(lái)實(shí)現(xiàn)淡出淡入效果。但是有些瀏覽器對(duì)于某些元素的透明度設(shè)置支持不夠。而且要設(shè)置表格的透明度,幾乎在所有的瀏覽器里面都不可能。2010-02-02javascript定義變量時(shí)有var和沒(méi)有var的區(qū)別探討
定義變量時(shí)省略var是不安全的,不過(guò)是合法的。定義的變量的作用域取決于定義的位置2014-07-07JavaScript函數(shù)學(xué)習(xí)總結(jié)以及相關(guān)的編程習(xí)慣指南
這篇文章主要介紹了JavaScript函數(shù)學(xué)習(xí)總結(jié)以及相關(guān)的編程習(xí)慣指南,整理包含到了匿名函數(shù)和三元運(yùn)算符等非常cool的知識(shí)點(diǎn),需要的朋友可以參考下2015-11-11