Maison >interface Web >js tutoriel >Js implémente des compétences personnalisées behavior_javascript en matière de clic droit

Js implémente des compétences personnalisées behavior_javascript en matière de clic droit

WBOYoriginal: 2016-05-16 16:07:251104parcourir

Personnalisez le comportement du clic droit (obtenez les coordonnées de la souris (x, y) via l'objet événement)

<!doctype html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>demo</title>
    <style type="text/css">
      html{
        height:100%;
      }
      body{
        height:100%;
      }
      #mydiv{
        width:300px;
        height:300px;
        background-color: #ff7400;
      }
      #ctxMenu{
        background-color: #ff7400;
        list-style-type: none;
        position: absolute;
        padding:0px;
        border:1px solid #000;
        visibility: hidden;
      }
    </style>
  </head>
  <body>
    <div id="mydiv"></div>
    <h2 id="show"></h2>
    <input type="text"id="txt"><span id="help"></span>
    <ul id="ctxMenu">
      <li>上传</li>
      <li>下载</li>
      <li>新建</li>
      <li>取消</li>
    </ul>
    <script type="text/javascript">
      var $=function(id){
        return document.getElementById(id);
      };
      var h2=$("show");
      var ctx=$("ctxMenu");
      var txt=$("txt");
      var help=$("help");
      /*
      txt.onfocus=function(){
        help.innerHTML="请输入金额";
      }
      txt.onkeydown=function(event){
        help.innerHTML="";
        var code=event.keyCode;
        if(!(code>=48&&code<=57||code>=96&&code<=105||code==46||code==8||code==13||code==37||code==39||code==110||code==190)){
          event.preventDefault();
        }
      }
      */
      document.body.oncontextmenu=function(event){
        event.preventDefault();
        var x=event.pageX;
        var y=event.pageY;
        ctx.style.left=x+"px";
        ctx.style.top=y+"px";
        ctx.style.visibility="visible";
      }
      document.body.onclick=function(){
        ctx.style.visibility="hidden";
      }
      /*
      document.body.onmousemove=function(event){
        var x=event.pageX;
        var y=event.pageY;
        h2.innerHTML=x+":"+y;
      }
      */
      window.onbeforeunload=function(){
        var v=$("txt").value;
        if(v){
          return "";
        }
      }
      $("mydiv").onclick=function(){
        $("show").innerHTML="click";
      };
      $("mydiv").ondblclick=function(){
        $("show").innerHTML="dblclick";
      };
      $("mydiv").onmouseover=function(){
        $("show").innerHTML="mouseover";
        this.style.backgroundColor="#2d2d2d";
      };
      $("mydiv").onmouseout=function(){
        $("show").innerHTML="mouseout";
        this.style.backgroundColor="pink";
      }
    </script>
  </body>
</html>

Ce qui précède est tout le contenu partagé avec vous dans cet article, j'espère qu'il vous plaira.

Veuillez prendre un moment pour partager l'article avec vos amis ou laisser un commentaire. Nous vous remercierons sincèrement pour votre soutien !

Déclaration：

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

Article précédent：Node.js supprime les informations malveillantes du torrent files_node.jsArticle suivant：Node.js supprime les informations malveillantes du torrent files_node.js

Articles Liés

Voir plus