Rumah >hujung hadapan web >Soal Jawab bahagian hadapan >Bagaimana untuk menyembunyikan klik kanan dalam javascript

Bagaimana untuk menyembunyikan klik kanan dalam javascript

藏色散人
藏色散人asal
2022-01-11 15:08:121831semak imbas

Cara menyembunyikan klik kanan dalam JavaScript: 1. Buka fail kod yang sepadan 2. Gunakan kaedah "window.oncontextmenu=function(e){e.preventDefault();}" untuk melumpuhkan menu klik kanan.

Bagaimana untuk menyembunyikan klik kanan dalam javascript

Persekitaran pengendalian artikel ini: sistem Windows 7, javascript1.8.5, komputer Dell G3.

Bagaimana untuk menyembunyikan klik kanan dalam javascript?

js menetapkan atau lumpuhkan menu klik kanan tetikus

Apabila pengguna mengklik butang kanan tetikus, acara oncontextmenu dicetuskan

js lumpuhkan menu klik kanan tetikus

window.oncontextmenu=function(e){
    //取消默认的浏览器自带右键 很重要!!
    e.preventDefault();
}

js sesuaikan menu klik kanan tetikus

html sediakan item menu tersuai

<div id="menu">
            <div class="menu">功能1</div>
            <div class="menu">功能2</div>
            <div class="menu">功能3</div>
            <div class="menu">功能4</div>
            <div class="menu">功能5</div></div>

gaya item menu set css

#menu{
    width: 0; /*设置为0 隐藏自定义菜单*/
    height: 125px;
    overflow: hidden; /*隐藏溢出的元素*/
    box-shadow: 0 1px 1px #888,1px 0 1px #ccc;
    position: absolute; /*自定义菜单相对与body元素进行定位*/
}
.menu{
    width: 130px;
    height: 25px;
    line-height: 25px;
    padding: 0 10px;
}

js mengawal paparan dan penyembunyian menu

window.oncontextmenu=function(e){
    //取消默认的浏览器自带右键 很重要!!
    e.preventDefault();
    //获取我们自定义的右键菜单
    var menu=document.querySelector("#menu");
    //根据事件对象中鼠标点击的位置,进行定位
    menu.style.left=e.clientX+'px';
    menu.style.top=e.clientY+'px';
    //改变自定义菜单的宽,让它显示出来
    menu.style.width='100px';
    menu.style.height='auto';
}
//鼠标左键任意位置单击, 关闭右键菜单
window.onclick=function(e){
    //用户触发click事件就可以关闭了,因为绑定在window上,按事件冒泡处理,不会影响菜单的功能
    document.querySelector('#menu').style.height=0;
}

Pembelajaran yang disyorkan: "js tutorial asas"

Atas ialah kandungan terperinci Bagaimana untuk menyembunyikan klik kanan dalam javascript. 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