JavaScript 自定義html元素滑鼠右鍵菜單

来源:https://www.cnblogs.com/shouke/archive/2019/12/02/11969871.html

自定義html元素滑鼠右鍵菜單 實現思路 在觸發contextmenu事件時,取消預設行為(也就是阻止瀏覽器顯示自帶的菜單),獲取右鍵事件對象,來確定滑鼠的點擊位置,作為顯示菜單的left和top值 編碼實現 <!DOCTYPE html> <html> <head> <meta charset=" ...


自定義html元素滑鼠右鍵菜單

 

 

實現思路

在觸發contextmenu事件時,取消預設行為(也就是阻止瀏覽器顯示自帶的菜單),獲取右鍵事件對象,來確定滑鼠的點擊位置,作為顯示菜單的left和top值

 

編碼實現

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<script>

    window.onload = function(){

 

    var menu = document.getElementById('menu');

    document.body.oncontextmenu = function(e){ // 自定義body元素的滑鼠事件處理函數

        var e = e || window.event;

        e.preventDefault();  //阻止系統右鍵菜單 IE8-不支持

       

        // 顯示自定義的菜單調整位置

        let scrollTop =

                document.documentElement.scrollTop || document.body.scrollTop;// 獲取垂直滾動條位置

        let scrollLeft =

                document.documentElement.scrollLeft || document.body.scrollLeft;// 獲取水平滾動條位置

 

        menu.style.display = 'block';

        menu.style.left = e.clientX + scrollLeft + 'px';

        menu.style.top = e.clientY  + scrollTop + 'px';

    }

       

    // 滑鼠點擊其他位置時隱藏菜單

    document.onclick = function(){

        menu.style.display = 'none';

    }

}

 

</script>

<style>

    *{

        margin: 0;

        padding: 0;

    }

   

    p{

        margin-top: 200px; 

    }

   

    ul li{

        list-style-type: none;

        margin: 10px 0;

        text-align: center;

    }

   

    #menu{

        border:1px solid #ccc;

        background: #eee;

    position: absolute; // 設置菜單為絕對位置

        width: 100px;

        height: 120px;

        display: none;

    }

</style>

</head>

<body style="overflow:auto">

    <div id="box" style="height:5000px; width:5000px">讓body元素出現滾動條用的div</div>

    <div id="menu">

        <ul>

            <li><a href="#">分享</a></li>

            <li><a href="#">收藏</a></li>

            <li><a href="#">舉報</a></li>

        </ul>

    </div>

</body>

</html>

 

 

實現效果

 

 

 


您的分享是我們最大的動力!

更多相關文章
  • js學習中三種對象: 內置對象 js系統自帶的對象 自定義對象 自己定義的構造函數創建的對象 瀏覽器對象 BOM的時候講 內置對象: Math Date String Array Object //如何驗證變數是不是對象? console.log(Array instanceof Object); ...
  • 構建表格 表格的基本元素包括:table、tr和td。table表示HTML文檔中的表格,支持border屬性,用於定義表格邊框的寬度;tr表示表格中的行;td表示表格中的單元格,包括如下屬性:1)colspan:規定單元格可橫跨的列數;2)rowspan:規定單元格可橫跨的行數; <table> ...
  • 原始數據類型: number, string, boolean, undefined, null, object 基本類型(簡單類型), 即值類型: number, string, boolean 複雜類型(引用類型): object 空類型:undefined, null 存儲空間 值類型的值在哪 ...
  • 1. 對象: 有屬性和方法,特指的某個事物 對象: 一組無序屬性的集合的鍵值對,屬性的值可以是任意的類型 2.JSON格式的數據:一般都是成對的,是鍵值對, json也是一個對象, 數據都是成對的, 一般json格式的數據無論是鍵還是值都是用雙引號括起來的 var json = { "name": ...
  • 在使用jquery-validate.js插件時可以做一些初始化配置在初始化jquery-validate.js對象的時候,將外部的一些配置和該插件內部的一些預設配置合併在一起,如果有相同的配置,前者覆蓋後者(預設)的配置 // Constructor for validator $.validat ...
  • JS是一門什麼樣的語言? 是一門解釋性的語言 是一門腳本語言 是一門弱類型語言,聲明變數都用var 是一門基於對象的語言 是一門動態類型的語言: 1. 代碼(變數)只有執行到這個位置的時候,才知道這個變數中到底存儲的是什麼,如果是對象,就有對象的屬性和方法,如果是變數就是變數的作用 2. 對象沒有什 ...
  • 1. 簡書類 實現效果 html代碼 <div class="container"> <form action="" class="parent"> <input type="text" class="search" placeholder="搜索"> <input type="button" na ...
  • javascript 報錯 string.split is not a function ...
一周排行
x