JavaScript simule les compétences effect_javascript du menu contextuel de la souris-js tutoriel-php.cn

Maison

interface Web

js tutoriel

JavaScript simule les compétences effect_javascript du menu contextuel de la souris

May 16, 2016 pm 03:12 PM

L'exemple de cet article partage le code spécifique pour simuler le menu contextuel de la souris en JavaScript pour votre référence. Le code spécifique est le suivant
. Rendu :

Code spécifique :

&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;

Copier après la connexion

J'espère que cet article sera utile à tous ceux qui apprennent la programmation JavaScript.

Déclaration de ce site Web

Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn