信鸽网

Js实现自定义右键行为

  作者：bea

自定义右键行为（通过事件对象获得鼠标的坐标(x,y)） <!doctype html><html> <head> <meta charset="UTF-8"> <title>demo</title> <style type="text/css"> html{ height:100%; } body{ height

自定义右键行为（通过事件对象获得鼠标的坐标(x,y)）




<!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>


以上就是本文给大家分享的全部内容了，希望大家能够喜欢。


请您花一点时间将文章分享给您的朋友或者留下评论。我们将会由衷感谢您的支持！




有用  |  无用

猜你喜欢

您可能感兴趣的文章: