自定义右键行为(通过事件对象获得鼠标的坐标(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>

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

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

标签:
Js,自定义,右键

免责声明:本站文章均来自网站采集或用户投稿,网站不提供任何软件下载或自行开发的软件! 如有用户或公司发现本站内容信息存在侵权行为,请邮件告知! 858582#qq.com
桃源资源网 Design By www.nqtax.com

评论“Js实现自定义右键行为”

暂无“Js实现自定义右键行为”评论...

稳了!魔兽国服回归的3条重磅消息!官宣时间再确认!

昨天有一位朋友在大神群里分享,自己亚服账号被封号之后居然弹出了国服的封号信息对话框。

这里面让他访问的是一个国服的战网网址,com.cn和后面的zh都非常明白地表明这就是国服战网。

而他在复制这个网址并且进行登录之后,确实是网易的网址,也就是我们熟悉的停服之后国服发布的暴雪游戏产品运营到期开放退款的说明。这是一件比较奇怪的事情,因为以前都没有出现这样的情况,现在突然提示跳转到国服战网的网址,是不是说明了简体中文客户端已经开始进行更新了呢?