鼠標右鍵兼容MAC版火狐瀏覽器

jifei 發布于2019-08-23 15:32 / 462人閱讀

摘要：事件在版火狐瀏覽器下表現差異谷歌和其它瀏覽器打印復制阻止右鍵系統默認的彈出框除了火狐，在其他瀏覽器上的交互右鍵執行事件火狐是的時候執行抬起消失兼容寫法思路阻止默認事件右鍵展示重寫菜單左鍵隱藏

oncontextmenu事件在MAC版火狐瀏覽器下表現差異

谷歌和其它瀏覽器

//css
    *{margin:0;padding:0;}
    #right-menu{position:absolute;width:150px;visibility:hidden;border:1px solid #bababa;box-shadow: 1px 1px 2px #8e8e8e;}
    #right-menu li{list-style:none;text-indent:1em;}
    #right-menu li a{display:block;height:30px;line-height:30px;text-decoration:none;color:#666;font-size: 12px;}
    #right-menu li a:hover{background:#ebebeb;color:black;}

//html

    
        打印
        復制
    


//js
document.oncontextmenu = function(e){
    if(window.event) e = window.event;
    var mymenu = document.getElementById("right-menu");
    mymenu.style.visibility = "visible";
    mymenu.style.left = e.clientX + 5 +"px";
    mymenu.style.top = e.clientY + 5 + "px";
    return false;//阻止右鍵系統默認的彈出框
};
document.onclick = function(){
    var mymenu = document.getElementById("right-menu");
    mymenu.style.visibility = "hidden"; 
}
//除了火狐，oncontextmenu在其他瀏覽器上的交互 右鍵mouseup 執行事件
//火狐是mousedown的時候執行 抬起消失

兼容寫法

document.oncontextmenu = function(e){
    return false;
};
document.onmouseup=function(e) {
    var mymenu = document.getElementById("right-menu");
    if (!e) e=window.event;
    if (e.button==0) {
        mymenu.style.visibility = "hidden"; 
    }
    if (e.button==2) {
        mymenu.style.visibility = "visible";
        mymenu.style.left = e.clientX + 5 +"px";
        mymenu.style.top = e.clientY + 5 + "px";
    }
}

//思路 
1.阻止默認事件
2.mouseup 右鍵展示重寫菜單 左鍵隱藏

GPU云服務器云服務器鼠標右鍵火狐兼容屏蔽鼠標右鍵 php鼠標右鍵

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/102196.html

JS基礎篇--事件綁定及深入

摘要：學習要點傳統事件綁定的問題事件處理函數事件處理函數事件對象的其他補充事件綁定分為兩種一種是傳統事件綁定內聯模型，腳本模型，一種是現代事件綁定級模型。現代事件綁定在傳統綁定上提供了更強大更方便的功能。事件和事件事件和事件，有關加載方面的事件。學習要點： 1.傳統事件綁定的問題2.W3C事件處理函數3.IE事件處理函數4.事件對象的其他補充事件綁定分為兩種：一種是傳統事件綁定（內聯模型...

yearsj 2019-08-19 17:47 評論0 收藏0
web前端（2）—— 前端技術介紹

摘要：前端技術前文了解了什么是前端，那么前端技術到底有哪些呢最核心的就這三個什么是，超文本標記語言，標準通用標記語言下的一個應用那么超文本標記語言又是什么呢哈哈，沒完沒了是吧，學習就是要這種沒完沒了的勁。前端技術前文了解了什么是前端，那么前端技術到底有哪些呢？最核心的就這三個： html/html5 css/css3 javascript 什么是HTML HyperText Mark...

番茄西紅柿 2019-04-23 13:12 評論0 收藏0
JavaScript 基礎知識 - DOM篇(一)

摘要：前言本篇文章是基礎知識的篇，如果前面的基礎知識入門篇看完了，現在就可以學習了。基本概念分為三個部分。在這個基礎上使用一些新特性，高級瀏覽器支持，低級瀏覽器不支持。在對象中的屬性是一個布爾值，只有和。 showImg(https://segmentfault.com/img/remote/1460000012581493?w=1920&h=1080); DOM 前言本篇文章是JavaS...

cuieney 2019-08-22 13:40 評論0 收藏0
通過Web安全工具Burp suite找出網站中的XSS漏洞實戰(二)

摘要：一背景筆者月份在慕課網錄制視頻教程跨站漏洞加強安全里面需要講到很多實戰案例，在漏洞挖掘案例中分為了手工挖掘工具挖掘代碼審計三部分內容手工挖掘篇參考地址為快速找出網站中可能存在的漏洞實踐一本文主要記錄利用安全工具進行漏洞挖掘部分，分為了設置代一、背景筆者6月份在慕課網錄制視頻教程XSS跨站漏洞加強Web安全,里面需要講到很多實戰案例，在漏洞挖掘案例中分為了手工挖掘、工具挖掘、代碼審...

klinson 2019-07-01 10:47 評論0 收藏0