JavaScript mensimulasikan kemahiran effect_javascript menu klik kanan tetikus-tutorial js-php.cn

Rumah

tutorial js

JavaScript mensimulasikan kemahiran effect_javascript menu klik kanan tetikus

May 16, 2016 pm 03:12 PM

Contoh dalam artikel ini berkongsi kod khusus untuk mensimulasikan menu klik kanan tetikus dalam JavaScript untuk rujukan anda Kod khusus adalah seperti berikut
Penyampaian:

Kod khusus:

&lt;!DOCTYPE html&gt;
&lt;html lang="en"&gt;
&lt;head&gt;
  &lt;meta charset="UTF-8"&gt;
  &lt;title&gt;右键菜单&lt;/title&gt;
  &lt;style type="text/css"&gt;
    *{
      margin: 0;
      padding: 0;
    }
    #menu{
      width: 254px;
      /*background-color: #ccc;*/
      font-size: 12px;
      position: fixed;
      top: 0px;
      left: 0px;
      /*height: 240px;*/
      /*padding-left: 26px;*/
      padding-top: 2px;
      border:1px solid #ccc;
      display: none;
    }
    #menu li{
      list-style: none;
      line-height: 25px;
      margin-left: -1px;
      padding-left: 26px;
    }
    #menu li:hover{
      background-color: #4281f4;
      color: #fff;
    }
  &lt;/style&gt;
&lt;/head&gt;
&lt;body&gt;
   &lt;ul id="menu"&gt;
     &lt;li&gt;返回(B)&lt;/li&gt;
     &lt;li&gt;前进(F)&lt;/li&gt;
     &lt;li&gt;从新加载(R)&lt;/li&gt;
     &lt;li&gt;另存为(A)&lt;/li&gt;
     &lt;li&gt;打印(P)&lt;/li&gt;
     &lt;li&gt;查看网页源代码(V)&lt;/li&gt;
     &lt;li&gt;查看网页信息(I)&lt;/li&gt;
     &lt;li&gt;审查元素(N)&lt;/li&gt;
   &lt;/ul&gt;
   &lt;script type="text/javascript"&gt;
    var menu = document.getElementById("menu");

    document.oncontextmenu =function(e){
      var e = e ||window.event;//兼容
     console.log(e.clientX,e.clientY);
     console.log(e);
     //单击显示div
     menu.style.display = "block";
     //设置定义
     //判断鼠标坐标是否大于视口宽度-块本身宽度
     var cakLeft = (e.clientX &gt; document.documentElement.clientWidth - menu.offsetWidth)&#63;(document.documentElement.clientWidth - menu.offsetWidth):e.clientX;
     var cakTop = (e.clientY &gt; document.documentElement.clientHeight - menu.offsetHeight)&#63;(document.documentElement.clientHeight - menu.offsetHeight):e.clientY;
     menu.style.left = cakLeft + "px";
     menu.style.top = cakTop + "px";

    return false;
    }

      menu.onclick = function(e) {
    var e = e || window.event;
    e.cancelBubble = true;
    //阻止冒泡。
  }
   document.onclick = function() {
    menu.style.display = "none";
  }
   
   &lt;/script&gt;
&lt;/body&gt;
&lt;/html&gt;

Salin selepas log masuk

Saya harap artikel ini akan membantu semua orang yang mempelajari pengaturcaraan JavaScript.

Kenyataan Laman Web ini

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