2. 程式人生 > >遮蔽瀏覽器右鍵選單功能，自定義右鍵選單（相容IE8）

遮蔽瀏覽器右鍵選單功能，自定義右鍵選單（相容IE8）

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

做了個自定義右鍵選單的功能，和獲取選中文字內容相關，一起記錄一下。

網上查閱嘗試了很多方式，選擇了一個較為簡潔的方式實現，程式碼很少，進行細節調整後發現存在IE8相容性問題，又查閱資料後進行了優化，目前可以完美相容IE8，但注意jQuery版本必須1.7+，我這裡用的1.8.3版本。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title></title>
        <script src="js/jquery-1.8.3.js"
 
></script>
        <style type="text/css">
            /*css程式碼*/
            #menu{
                width: 0; /*設定為0 隱藏自定義選單*/
                overflow: hidden; /*隱藏溢位的元素*/
                box-shadow: 0 1px 1px #888,1px 0 1px #ccc;
                position: absolute; /*自定義選單相對與body元素進行定位*/
                background-color
 
: white;
            }
            .menu{
                width: 130px;
                line-height: 25px;
                padding: 0 10px;
            }
        </style>
        <script>
            var str = "";
            $(function() {
                $(document).on('contextmenu', function
 
(e) { 
                    str = window.getSelection?window.getSelection().toString():document.selection.createRange().text;
                    if(str == ""){
                        return;
                    }

                    //獲取我們自定義的右鍵選單
                    var menu=document.querySelector("#menu");

                    //加上滾動條的高度
                    var scrollTop=document.documentElement.scrollTop||document.body.scrollTop;
                    //根據事件物件中滑鼠點選的位置，進行定位
                    menu.style.left=e.clientX+'px';
                    menu.style.top=e.clientY+scrollTop+'px';

                    //改變自定義選單的寬，讓它顯示出來
                    menu.style.width='95px';
                    return false;
                }); 
            });
            //關閉右鍵選單，很簡單
            document.onclick=function(e){

                //使用者觸發click事件就可以關閉了，因為繫結在window上，按事件冒泡處理，不會影響選單的功能
            　　　　document.querySelector('#menu').style.width=0;
            }
            $(document).ready(function(){
                $('#searchQXJS').click(function(){
                    console.info('選中的文字為：' + str);
                });
            });
        </script>
    </head>
    <body>
        <div>所以，我們要做的就是，在觸發contextmenu事件時，取消掉預設行為(也就是阻止瀏覽器顯示自帶的選單)
通過傳入的事件物件，來確定滑鼠的點選位置，作為left和top的值來進行元素的定位，並顯示自定義選單</div>
        <!--自定義右鍵選單html程式碼-->
        <div id="menu">
            <div class="menu" id="searchQXJS" style="cursor: pointer;">選中文字</div>
        </div>
    </body>
</html>

這裡我對瀏覽器自帶右鍵選單的遮蔽是在選中了文字的情況下，沒有選中文字時右鍵不會出現自定義選單，而依舊是瀏覽器自帶右鍵功能。

$(document).on的事件定義方式是為了相容IE8，很多網上的document.oncontextmenu=function的事件在IE中會有相容性問題，無法進入事件，但也不報錯。包括對選中文字內容的獲取，三目運算的寫法也是為了解決相容性問題。

效果如下：
右鍵選單效果
獲取選中的文字內容

相關推薦

遮蔽瀏覽器右鍵選單功能，自定義右鍵選單（相容IE8）

做了個自定義右鍵選單的功能，和獲取選中文字內容相關，一起記錄一下。 網上查閱嘗試了很多方式，選擇了一個較為簡潔的方式實現，程式碼很少，進行細節調整後發現存在IE8相容性問題，又查閱資料後進行了優化，目前可以完美相容IE8，但注意jQuery版本必須1.7+，我

antd Tree元件中，自定義右鍵選單

最近專案中，有一個需求是自定義antd的Tree元件的右鍵選單功能。 直接上程式碼 class Demo extends Component { state = { rightClickNodeTreeItem: { pageX: "", pageY: "",

虛擬桌面更新，自定義快捷鍵

Win10沒有提供修改虛擬桌面快捷鍵的功能，所以使用AHK軟體來自定義快捷鍵 AHK（AutoHotkey） 鍵盤，滑鼠等的指令碼模擬工具，可以監聽，觸發鍵盤和滑鼠的動作。 下載： https://www.autohotkey.com/download/

XAF 框架中，自定義參數動作（Action），輸入參數的控件可定義，用於選擇組織及項目

示例 app frame tro href express documents 定義 ron XAF 框架中，如何生成一個自定義參數動作（Action），輸入參數的控件可定義？ 參考文檔：https://documentation.devexpress.com/eXpres

【朝花夕拾】Android自定義View篇之（十一）View的滑動，彈性滑動與自定義PagerView

前言        由於手機螢幕尺寸有限，但是又經常需要在螢幕中顯示大量的內容，這就使得必須有部分內容顯示，部分內容隱藏。這就需要用一個Android中很重要的概念——滑動。滑動，顧名思義就是view從一個地方移動到另外一個地方，我們平時看到的

SpringMVC（十二）自定義異常處理器 HandlerExceptionResolver（接口）

pin org ota admin pack property framework ase exception 自定義異常處理器和系統異常處理器的提升版可以實現相同的功能，但是使用的方法不同，自定義異常處理器可以不用在配置文件中配置name多東西，只需要一個異常處理器就可以

用原生JS實現多張圖片上傳及預覽功能（相容IE8）

最近需要做一個圖片上傳預覽的功能（相容IE8-11、chrome、firefox等瀏覽器），網上現有的檔案上傳元件（如webuploader）總是會遇到一些相容性問題。於是我參考了一些博文（連結找不到了⊙o⊙…），自己用原生JS寫了一個支援多張圖片上傳預覽功能的Demo 先通過最終效果看一下功能：

Odoo 自定義Widgets 基礎教程（章節1）

大家好， 此次，我們主要講解 Odoo 中的Widgets。 網上、論壇裡很多提及Widget的文章，但很少說Odoo自定義Widget 是如何實現的，這一直是大家所苦惱的地方。本章，將對Odoo中的Widget 進行基礎講解。 首先， Widget【掛件】產生的目的，是為了方便後端開發人員在不熟悉Ja

自定義輪播圖（banner圖）

public class MyBannerActivity extends AppCompatActivity { private String[] picUrl = { "https://img.huxiucdn.com/article/c

自定義View繪製流程（面試專用）

（自己整理的比較亂，但這麼說沒問題的！） 自定義view是幹嘛的呢？ 當我們不滿足於Android提供的原生控制元件和佈局時，就應該考慮到自定義view。 自定義View分為兩大塊。  自定義控制元件  和  自定義容器 自定義View必須重寫兩個構造方法  第一個

隨筆（八） 自定義redis快取註解（基於springboot）

前言：            最近專案開發中需要使用redis快取為資料庫降壓。由於在構建系統時沒有使用快取，後期加入快取的時候不想對業務程式碼上新增，造成程式碼入侵，所有封裝了一套自定義快取類，處理快取。 開發環境：          win10+Intelli

【Android】_自定義Adapter_學生註冊（無資料庫）

本文是完善前一篇學生註冊文章(https://blog.csdn.net/cungudafa/article/details/84780652)中:對`自定義ListView`增加`介面卡Adapter`實現對每個學生個體進行再編輯和刪除操作。

spring-security 個性化用戶認證流程——自定義登錄頁面（可配置）

ron 進行 狀態 row 錯誤 this 力度 override all 1.定義自己的登錄頁面我們需要根據自己的業務系統構建自己的登錄頁面以及登錄成功、失敗處理在spring security提供給我的登錄頁面中，只有用戶名、密碼框，而自帶的登錄成功頁面是空白頁面（可以

Android 自定義view --圓形百分比（進度條）

注：本文由於是在學習過程中寫的，存在大量問題(overdraw onDraw new物件)，請讀者們不要被誤導！！解決辦法見後面的部落格。 起因 最近公司專案有需求需要用到輕量級圖表如下

一步一步帶你實現自定義圓形進度條（詳解）

        每次看到別人做出炫酷的都會想，這個應該很難吧？這是心理上先入為主的就這麼認為了，其實實現很簡單，下面一步一步的詳細剖析自定義圓形進度條的步驟。 首先看效果圖： 篇幅有點長，耐心看完肯定get新技能。 看每一個檢視都包含了些什麼。 最

自定義物件去重（Set篇）

當需要給集合去重時，實現的方式有很多。這裡介紹使用Set去重（兩種方式） 需求：給多個Student物件去重 public class Student { private int id; private String name; public Student() {

Echarts自定義資料檢視樣式（表格樣式）

用過echarts的同胞們都知道，自帶的資料檢視是怎樣的。在真正做專案時，肯定需要我們自己來寫一個相對美觀的資料檢視。下面以表格樣式的資料檢視為例，來實現一個自己的資料檢視。 <!DOCTYPE html> <html> <head>

Android：實際運用Zxing整合二維碼掃描 及 自定義掃碼介面（demo原始碼）

二維碼掃描，各大主流App必不可少的功能，而且google已將輪子替我們造好，直接拿來使用即可。以下是教學如何將Zxing開源庫整合到自己專案中，並且自定義掃碼介面，後期可根據自己的業務需求進行修改，最後補充了一點由此延伸的學習技能點。 一. 整合Zing

android自定義環形統計圖（帶動畫）

一、測試截圖 二、實現原理  package com.freedomanlib; import java.util.Timer; import java.util.TimerTask; import android.annotation.SuppressLint;

網路程式設計---乙太網頭 IP頭 ARP包結構體封裝及常用自定義網路轉換函式（已測試）

  以下的結構體在實際工程中經過了測試是可以的，自定義函式也經過了測試，到目前為止沒有出現問題。 // --------------------------------------------- // TCP/IP基礎結構體和通用函式 // ---------