取消滑鼠右鍵預設事件contextmenu

阿新 • • 發佈：2019-01-09

想要web頁面充分展示自身特色，修改瀏覽器預設的右鍵事件必不可少。

右鍵單擊網頁，總是彈出另存為、審查元素、檢視網頁原始碼等等之類的選單。就我看來這是挺影響體驗的。像右鍵這麼重要的位置，必須充分利用。調整頁面連結之類等等的需求都是可以的。

如何實現這個需求？利用瀏覽器contextmenu事件。

支援contextmenu事件的瀏覽器有IE、Firefox、Safari、Chrome和Opera11+。

下面是一個簡單的demo：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" 
>
    <title>contextmenu Event Example</title>
</head>
<body>
    <div id="myDiv">Right click or ctrl+click me to get a custom context menu.
        Click anywhere else to get the default context menu.</div>
    <ul id="myMenu" style="position:absolute;visibility:hidden;background-color:silver" 
>
        <li><a href="https://www.baidu.com/">百度</a></li>
        <li><a href="http://blog.csdn.net/qq_22509715">我的部落格</a></li>
        <li><a href="https://github.com/">github</a></li>
    </ul>
</body>
</html>


    var EventUtil = {
        addHandler : function(element , type , handler){
            if 
(element.addEventListener){
                element.addEventListener(type , handler , false);
            }else if(element.attachEvent){
                element.attachEvent('on' + type , handler);
            }else{
                element['on' + type] = handler;
            }
        },
        removeHandler : function(element , type , handler){
            if(element.removeEventListener){
                element.removeEventListener(type , handler ,false);
            }else if(element.detatchEvent){
                element.detatchEvent('on' + type , handler);
            }else{
                element['on' +type] = null;
            }
        },
        getEvent:function(event){
            return event ? event : window.event;
        },
        getTarget:function(event){
            return event.target || event.srcElement;
        },
        preventDefault:function(event){
            if(event.preventDefault){
                event.preventDefault();
            }else{
                event.returnValue = false;
            }
        },
        stopPropagation:function(event){
            if(event.stopPropagation){
                event.stopPropagation();
            }else{
                event.cancelBubble = true;
            }
        },
        getRelatedTarget:function(event){
            if(event.relatedTarget){
                return event.relatedTarget;
            }else if(event.toElement){
                return event.toElement;
            }else if(event.fromElement){
                return event.fromElement;
            }else{
                return null;
            }
        },
        gutButton:function(event){
            if(document.implementation.hasFeature("MouseEvents" , "2.0")){
                return event.button;
            }else{
                switch(event.button){
                    case 0:
                    case 1:
                    case 2:
                    case 3:
                    case 5:
                    case 7:
                        return 0;
                    case 2:
                    case 6:
                        return 2;
                    case 7:
                        return 1;
                }
            }
        },
        getWheelDelta:function(event){
            if(event.wheelDelta){
                return (client.engine.opera && client.engine.opera < 9.5 ? -event.wheelDelta : event.wheelDelta);
            }else{
                return -event.detail * 40;
            }
        },
        getCharCode:function(event){
            if(typeof event.charCode == "number"){
                return event.charCode;
            }else{
                return event.keyCode;
            }
        }
    };

    EventUtil.addHandler(window , "load" , function(event){
        var div = document.getElementById("myDiv");
        EventUtil.addHandler(div , "contextmenu" , function(event){

            event = EventUtil.getEvent(event);
            EventUtil.preventDefault(event);

            var menu = document.getElementById("myMenu");
            menu.style.left = event.clientX + "px";
            menu.style.top = event.clientY + "px";
            menu.style.visibility = "visible";
        });
        EventUtil.addHandler(document , "click" , function(event){
            document.getElementById("myMenu").style.visibility = "hidden";
        });
    })

以上js的事件處理程式用到了另外一篇文章的跨瀏覽器相容性的事件處理程式

樣式程式碼沒新增css樣式，只要稍微新增css就能很酷炫了哦!

原始碼

取消滑鼠右鍵預設事件contextmenu

想要web頁面充分展示自身特色，修改瀏覽器預設的右鍵事件必不可少。右鍵單擊網頁，總是彈出另存為、審查元素、檢視網頁原始碼等等之類的選單。就我看來這是挺影響體驗的。像右鍵這麼重要的位置，必須充分利用。調整頁面連結之類等等的需求都是可以的。如何實現這個需求？

js遮蔽滑鼠右鍵預設事件以實現自定義選單

2017-12-18日，2017年即將結束的日子裡。公司做了一個專案，主要難點在於實現公司組織架構圖上，何謂組織架構圖，如下便是：這裡的每個節點都有相應的右鍵選單，說白了就跟你用xmind的體

取消滑鼠右鍵功能

在html頁面中新增如下程式碼，利用oncontextmenu 事件可以取消滑鼠右鍵功能： oncontextmenu 事件在元素中使用者右擊滑鼠時觸發並開啟上下文選單。注意：所有瀏覽器都支援 oncontextmenu 事件， contextmenu

jquery監聽ctrl + c 和滑鼠右鍵“複製”事件

<!DOCTYPE html> <html> <head> <meta charset="utf-8"/> <title>這裡是測試複製

Javascript和jquery事件--滑鼠右鍵事件，contextmenu

右鍵點選觸發是瀏覽器的預設選單事件contextmenu，你可以選擇阻止它，使用event.preventDefault();或者return false;。想要定義右鍵點選事件，關注的是mouseup或者mousedown事件，使用event獲取點選的鍵： Js中使用event. button---0

JavaScript滑鼠事件，點選滑鼠右鍵，彈出div

document.oncontextmenu = function(){return false}; //禁止滑鼠右鍵選單顯示 var res = document.getElementById('box'); //找到id為b

40個js小技巧:遮蔽滑鼠右鍵、取消選取、防止複製、貼上、轉換位址列圖示

來源：http://www.cnblogs.com/aliang1992/p/6279291.html 1. oncontextmenu="window.event.returnValue=false" 將徹底遮蔽滑鼠右鍵 <table border oncont

ECharts重寫滑鼠右鍵點選事件

最近在學習ECharts，關於ECharts的滑鼠右鍵事件可以看官網ECharts3文件的API,網址：點這個網址直接跳轉到官網API指定的滑鼠事件中去如下：在 ECharts 中主要通過 on 方法新增事件處理函式，如下： myChart.

jquery.contextMenu 滑鼠右鍵

本文介紹一種網頁中實現右鍵功能的方案–contextMenu。下載下載得到壓縮檔案jQuery-contextMenu-master.zip 解壓後，使用dist目錄下css、js。使用方法使用步驟： (1) 引用css、js。

C#引用CefSharp並遮蔽滑鼠右鍵和禁止拖動放置事件

目錄： C#引用CefSharp 在C#的設計介面，新增panel控制元件用來放置CEFSharp瀏覽器。 CEFSharp瀏覽器dll新增引用 using CefSharp; using CefSharp.WinForms; CEF

html取消滑鼠右擊事件

在某些場合我們需要取消滑鼠右鍵點選事件，在 body元素上新增這段程式碼即可取消 body 標籤上的滑鼠右擊事件 document.body.oncontextmenu = funct

Flash player 11.2滑鼠右鍵、中鍵事件範例

本文使用Flash Builder4.5建立ActionScript專案，使用SDK4.6，以及fp11.3（因為目前fp正式版已更新到了11.3，所以不再用fp11.2來測試）和11.3的playerglobal.swc。 SDK 4.6 下載地址：328MB，下載

登錄檔修改滑鼠右鍵中新建選單性

1、首先按鍵盤win+R 2、輸入regedit，並點選確認按鈕 3、開啟後如圖所示 4、依次找到：HKEY_CURRENT_USER\Software\Microsoft\Windows\ CurrentVersion\Explorer\Discardable\PostSetu

問題描述：滑鼠右鍵點選桌面空白處不反應或者反應很慢右鍵點選圖示沒有問題

問題描述：滑鼠右鍵點選桌面空白處不反應或者反應很慢右鍵點選圖示沒有問題問題出現原因：intel主機板驅動問題，昨天刪掉一些驅動之後出現問題了解決問題：桌面按右鍵反應慢，通常都是顯示卡驅動程式惹的禍,最簡單的辦法就是:開始--執行--.執行regsvr32 /u igfxpph.dll (有的電腦

自己動手DIY滑鼠右鍵選單背景

前期準備： 1、下載主要的檔案DLL，這是一個很小的DLL檔案玻璃露水.rar (125.64 KB) 玻璃露水.rar (125.64 KB) 此DLL已經是修改好的了 2、下載Resource Hacker

Windows7下Cygwin加入滑鼠右鍵，開啟當前目錄

感謝作者無私奉獻:http://herry2013git.blog.163.com/blog/static/2195680112013437139447/ 問題產生：裝好了Cygwin，常常需要鍵入長長的路徑，才能進入當前目錄，非常不方便。搜尋了相關做法，現在總結如下。 Cygwin安裝好之

JQuery模擬網頁中自定義滑鼠右鍵選單

題外話.......最近在開發一個網站專案的時候,需要用到網頁自定義右鍵選單,在網上看了各路前輩大神的操作,頭暈目眩,為了達到目的,突然靈機一動,於是便有了這篇文章. 先放個效果圖(沾沾自喜,大神勿噴): 廢話不多說,進入正題: 1.首先我們要禁用掉原網頁中右鍵選單

滑鼠右鍵開啟命令列cmd(管理員身份）

參考：https://blog.csdn.net/bdss58/article/details/54745380 新增到登錄檔將下面命令儲存為reg檔案： Windows Registry Editor Version 5.00 [-HKEY_CLASSES_ROOT\Directory\sh

GridControl新增滑鼠右鍵選單

需要在介面新增ContextMenueStrip控制元件 1.新增控制元件後,點選控制元件-點選控制元件右上角的三角形-點選"編輯項"-點選新增,新增按鈕-右側可修改對應屬性-確認提交步驟如下圖: 2.在GridControl中的ContextMenueStrip屬性中選擇上面所

HTML，JS禁止滑鼠右鍵、禁止全選、複製、貼上的方法

禁止滑鼠右鍵、禁止全選、複製、貼上； oncontextmenu事件禁用右鍵選單； js程式碼： document.oncontextmenu = function(){ event.returnValue = false; } // 或者直接返回整個事件 do

取消滑鼠右鍵預設事件contextmenu

相關推薦