cari
Rumahhujung hadapan webhtml tutorialJS如何实现自定义鼠标右击菜单

JS如何实现自定义鼠标右击菜单

Feb 26, 2018 am 10:05 AM
javascriptcapaiSesuaikan

这次给大家带来JS如何实现自定义鼠标右击菜单,JS实现自定义鼠标右击菜单的注意事项有哪些,下面就是实战案例,一起来看一下。

自定义鼠标右击菜单要素:

禁止页面默认右击事件

设置右击菜单的样式以及菜单出现的位置(通过捕获鼠标点击位置来确定菜单的位置)

鼠标在指定控件(区域)上右击时显示菜单(默认菜单隐藏,点击鼠标右键时显示)

效果图

1.png


代码如下:

HTML代码

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <link rel="stylesheet" type="text/css" href="right-click.css" />
</head>
<body>
    <div id="contain-friend">右击显示菜单</div>
    <label id="label1"></label>
    <div id="menu-friend">
        <div>
            <button id="btn1">菜单一</button>
        </div>
        <div>
            <button id="btn2">菜单二</button>
        </div>
    </div>
    <script src="right-click.js"></script>
</body>
</html>


HTML

JS代码

  关于菜单的定位主要是在第一个if语句部分,后面为验证按钮效果。

  menu1.style.left和menu1.style.top用于对菜单进行定位,由css样式表可知menu1的position属性定位为absolute,style.top定位相对于离它最近的position属性值不为static的父辈元素,此处即为body。

  menu的位置需要根据页面布局的具体情况来判断是e.offsetX/Y、e.clientX/Y或是其它,此处加上document.documentElement.scrollTop是考虑加上滚动条的情况(实际上这个例子里面并没有滚动条)。

window.onload = function() {
    //以下为自定义右击菜单
    document.oncontextmenu = function(e) {
        //阻止执行浏览器默认右击事件
        e.preventDefault();
        //聊天室好友列表
        if (document.getElementById("menu-friend")) {
            var menu1 = document.getElementById("menu-friend");
            menu1.style.display = "block";
            document.getElementById("contain-friend").onmousedown = function(e) {      //菜单定位
                menu1.style.left = e.offsetX + "px";
                menu1.style.top = document.documentElement.scrollTop + e.clientY + "px";
                //alert(menu1.style.top)
                if (document.getElementById("contain-friend")) {
                    if (e.button == 2) {
                        menu1.style.visibility = "visible";
                    } else {
                        menu1.style.visibility = "hidden";
                    }
                }
            }
        }
    }
    if (document.getElementById("btn1")) {
        document.getElementById("btn1").onmousedown = function(e) {
            document.getElementById("label1").innerHTML = "你点击了菜单一"
        }
    }
    if (document.getElementById("btn2")) {
        document.getElementById("btn2").onmousedown = function(e) {
            document.getElementById("label1").innerHTML = "你点击了菜单二"
        }
    }
    return false;
    //与e.preventDefault();功能相同,但是必须放在最后否则在return后面的内容均不执行
}


JavaScript文件

CSS样式表

1/*自定义右击菜单*/

.contain {
    background-color: #D1CEBC;
    height: 100px;
    width: 300px;
}
.menu {
    width: 150px;
    background-color: white;
    visibility: hidden;
    position: absolute;
    box-shadow: 0px 0px 10px #D1CEBC
}
.menu-item {
    background-color: #fff;
    margin: 0;
}
.menu-item-btn {
    width: 146px;
    margin: 2px;
    border: 0;
    text-align: left;
    padding-left: 60px;
    padding-top: 5px;
    padding-bottom: 5px;
    background-color: #fff;
    color: #000;
}
.menu-item-btn:hover {
    background-color: #D1CEBC;
}

相信看了这些案例你已经掌握了方法,更多精彩请关注php中文网其它相关文章!

相关阅读:

HTML中关于盒模型的总结

html语义化有那些作用

HTML中移动端有哪些布局方案

input的文本框怎么做到和img验证码

Atas ialah kandungan terperinci JS如何实现自定义鼠标右击菜单. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Kenyataan
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Apakah tag penutup diri? Beri contoh.Apakah tag penutup diri? Beri contoh.Apr 27, 2025 am 12:04 AM

Self-closingtagsinhtmlandxmlaretagsthatclosethem sendiriwithoutneedingaseparateClosingtag, smadriflifymarkupstructureandenhancingcodingeficiency.1) theareessentialinxmlforelementSwithoutContent, Memastikan-pembentukan-pembentukan

Beyond HTML: Teknologi Penting untuk Pembangunan WebBeyond HTML: Teknologi Penting untuk Pembangunan WebApr 26, 2025 am 12:04 AM

Untuk membina laman web dengan fungsi yang kuat dan pengalaman pengguna yang baik, HTML sahaja tidak mencukupi. Teknologi berikut juga diperlukan: JavaScript memberikan laman web dinamik dan interaktif, dan perubahan masa nyata dicapai dengan mengendalikan DOM. CSS bertanggungjawab untuk gaya dan susun atur laman web untuk meningkatkan estetika dan pengalaman pengguna. Rangka kerja moden dan perpustakaan seperti React, Vue.js dan sudut meningkatkan kecekapan pembangunan dan struktur organisasi kod.

Apakah atribut Boolean dalam HTML? Beri beberapa contoh.Apakah atribut Boolean dalam HTML? Beri beberapa contoh.Apr 25, 2025 am 12:01 AM

Atribut Boolean adalah atribut khas dalam HTML yang diaktifkan tanpa nilai. 1. Atribut Boolean mengawal tingkah laku elemen dengan sama ada ia wujud atau tidak, seperti dilumpuhkan melumpuhkan kotak input. 2. Prinsip kerja mereka adalah untuk mengubah tingkah laku elemen mengikut kewujudan atribut apabila penyemak imbas. 3. Penggunaan asas adalah untuk menambah atribut secara langsung, dan penggunaan lanjutan dapat dikawal secara dinamik melalui JavaScript. 4. Kesalahan umum adalah tersilap berfikir bahawa nilai -nilai perlu ditetapkan, dan kaedah penulisan yang betul harus ringkas. 5. Amalan terbaik adalah untuk memastikan kod ringkas dan menggunakan sifat Boolean dengan munasabah untuk mengoptimumkan prestasi laman web dan pengalaman pengguna.

Bagaimana anda boleh mengesahkan kod HTML anda?Bagaimana anda boleh mengesahkan kod HTML anda?Apr 24, 2025 am 12:04 AM

Kod HTML boleh menjadi bersih dengan pengesahan dalam talian, alat bersepadu dan proses automatik. 1) Gunakan W3CMarkupValidationService untuk mengesahkan kod HTML dalam talian. 2) Pasang dan konfigurasikan sambungan HTMLHINT dalam visualStudiocode untuk pengesahan masa nyata. 3) Gunakan HTMLTidy untuk mengesahkan dan membersihkan fail HTML secara automatik dalam proses pembinaan.

HTML vs CSS dan JavaScript: Membandingkan Teknologi WebHTML vs CSS dan JavaScript: Membandingkan Teknologi WebApr 23, 2025 am 12:05 AM

HTML, CSS dan JavaScript adalah teknologi teras untuk membina laman web moden: 1. HTML mentakrifkan struktur laman web, 2. CSS bertanggungjawab untuk kemunculan laman web, 3.

Html sebagai bahasa markup: fungsinya dan tujuannyaHtml sebagai bahasa markup: fungsinya dan tujuannyaApr 22, 2025 am 12:02 AM

Fungsi HTML adalah untuk menentukan struktur dan kandungan laman web, dan tujuannya adalah untuk menyediakan cara yang standard untuk memaparkan maklumat. 1) HTML menganjurkan pelbagai bahagian laman web melalui tag dan atribut, seperti tajuk dan perenggan. 2) Ia menyokong pemisahan kandungan dan prestasi dan meningkatkan kecekapan penyelenggaraan. 3) HTML adalah diperpanjang, membolehkan tag tersuai untuk meningkatkan SEO.

Masa Depan HTML, CSS, dan JavaScript: Trend Pembangunan WebMasa Depan HTML, CSS, dan JavaScript: Trend Pembangunan WebApr 19, 2025 am 12:02 AM

Trend masa depan HTML adalah semantik dan komponen web, trend masa depan CSS adalah CSS-in-JS dan CSShoudini, dan trend masa depan JavaScript adalah webassembly dan tanpa pelayan. 1. Semantik HTML meningkatkan kebolehcapaian dan kesan SEO, dan komponen web meningkatkan kecekapan pembangunan, tetapi perhatian harus dibayar kepada keserasian penyemak imbas. 2. CSS-in-JS meningkatkan fleksibiliti pengurusan gaya tetapi boleh meningkatkan saiz fail. Csshoudini membolehkan operasi langsung rendering CSS. 3.Webassembly mengoptimumkan prestasi aplikasi penyemak imbas tetapi mempunyai keluk pembelajaran yang curam, dan tanpa pelayan memudahkan pembangunan tetapi memerlukan pengoptimuman masalah permulaan sejuk.

HTML: Struktur, CSS: Gaya, JavaScript: Tingkah LakuHTML: Struktur, CSS: Gaya, JavaScript: Tingkah LakuApr 18, 2025 am 12:09 AM

Peranan HTML, CSS dan JavaScript dalam pembangunan web adalah: 1. HTML mentakrifkan struktur laman web, 2. CSS mengawal gaya laman web, dan 3. JavaScript menambah tingkah laku dinamik. Bersama -sama, mereka membina kerangka, estetika dan interaktiviti laman web moden.

See all articles

Alat AI Hot

Undresser.AI Undress

Undresser.AI Undress

Apl berkuasa AI untuk mencipta foto bogel yang realistik

AI Clothes Remover

AI Clothes Remover

Alat AI dalam talian untuk mengeluarkan pakaian daripada foto.

Undress AI Tool

Undress AI Tool

Gambar buka pakaian secara percuma

Clothoff.io

Clothoff.io

Penyingkiran pakaian AI

Video Face Swap

Video Face Swap

Tukar muka dalam mana-mana video dengan mudah menggunakan alat tukar muka AI percuma kami!

Alat panas

Pelayar Peperiksaan Selamat

Pelayar Peperiksaan Selamat

Pelayar Peperiksaan Selamat ialah persekitaran pelayar selamat untuk mengambil peperiksaan dalam talian dengan selamat. Perisian ini menukar mana-mana komputer menjadi stesen kerja yang selamat. Ia mengawal akses kepada mana-mana utiliti dan menghalang pelajar daripada menggunakan sumber yang tidak dibenarkan.

Dreamweaver Mac版

Dreamweaver Mac版

Alat pembangunan web visual

Versi Mac WebStorm

Versi Mac WebStorm

Alat pembangunan JavaScript yang berguna

EditPlus versi Cina retak

EditPlus versi Cina retak

Saiz kecil, penyerlahan sintaks, tidak menyokong fungsi gesaan kod

mPDF

mPDF

mPDF ialah perpustakaan PHP yang boleh menjana fail PDF daripada HTML yang dikodkan UTF-8. Pengarang asal, Ian Back, menulis mPDF untuk mengeluarkan fail PDF "dengan cepat" dari tapak webnya dan mengendalikan bahasa yang berbeza. Ia lebih perlahan dan menghasilkan fail yang lebih besar apabila menggunakan fon Unicode daripada skrip asal seperti HTML2FPDF, tetapi menyokong gaya CSS dsb. dan mempunyai banyak peningkatan. Menyokong hampir semua bahasa, termasuk RTL (Arab dan Ibrani) dan CJK (Cina, Jepun dan Korea). Menyokong elemen peringkat blok bersarang (seperti P, DIV),