Js实现自定义右键行为


Posted in Javascript onMarch 26, 2015

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

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

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

Javascript 相关文章推荐
自己的js工具 Event封装
Aug 21 Javascript
javascript一元操作符(递增、递减)使用示例
Aug 07 Javascript
js如何判断用户是在PC端和还是移动端访问
Apr 24 Javascript
jQuery性能优化技巧分析
Feb 20 Javascript
EasyUI Combobox设置默认值 获取text的方法
Nov 28 Javascript
Bootstrap Table使用心得总结
Nov 29 Javascript
Javascript前端经典的面试题及答案
Mar 14 Javascript
js判断是否是手机页面
Mar 17 Javascript
深入讲解xhr(XMLHttpRequest)/jsonp请求之abort
Jul 26 Javascript
AngularJS 的$timeout服务示例代码
Sep 21 Javascript
静态页面实现 include 引入公用代码的示例
Sep 25 Javascript
vue组件开发props验证的实现
Feb 12 Javascript
jQuery使用addClass()方法给元素添加多个class样式
Mar 26 #Javascript
Jquery异步提交表单代码分享
Mar 26 #Javascript
jQuery使用toggleClass方法动态添加删除Class样式的方法
Mar 26 #Javascript
jQuery使用CSS()方法给指定元素同时设置多个样式
Mar 26 #Javascript
12306验证码破解思路分享
Mar 25 #Javascript
jQuery获得包含margin的outerWidth和outerHeight的方法
Mar 25 #Javascript
jQuery获得document和window对象宽度和高度的方法
Mar 25 #Javascript
You might like
phpadmin如何导入导出大数据文件及php.ini参数修改
2013/02/18 PHP
php防止网站被攻击的应急代码
2015/10/21 PHP
php获取客户端IP及URL的方法示例
2017/02/03 PHP
详解php几行代码实现CSV格式文件输出
2017/07/01 PHP
PHP长连接实现与使用方法详解
2018/02/11 PHP
PHP高并发和大流量解决方案整理
2019/12/24 PHP
教你在heroku云平台上部署Node.js应用
2014/07/30 Javascript
JavaScript获取表单内所有元素值的方法
2015/04/02 Javascript
JavaScript表单验证实例之验证表单项是否为空
2016/01/10 Javascript
AngularJs定制样式插入到ueditor中的问题小结
2016/08/01 Javascript
jQuery中的select操作详解
2016/11/29 Javascript
js遮罩效果制作弹出注册界面效果
2017/01/25 Javascript
AngularJS表格添加序号的方法
2017/03/03 Javascript
深入解析js轮播插件核心代码的实现过程
2017/04/14 Javascript
webpack写jquery插件的环境配置
2017/12/21 jQuery
浅谈webpack4.x 入门(一篇足矣)
2018/09/05 Javascript
Weex开发之WEEX-EROS开发踩坑(小结)
2019/10/16 Javascript
vue-router 路由传参用法实例分析
2020/03/06 Javascript
使用C语言来扩展Python程序和Zope服务器的教程
2015/04/14 Python
用Python脚本来删除指定容量以上的文件的教程
2015/05/04 Python
Python代码块批量添加Tab缩进的方法
2018/06/25 Python
python3实现表白神器
2019/04/09 Python
python tkinter实现界面切换的示例代码
2019/06/14 Python
解决yum对python依赖版本问题
2019/07/05 Python
django实现模型字段动态choice的操作
2020/04/01 Python
Python三维绘图之Matplotlib库的使用方法
2020/09/20 Python
Python通过Schema实现数据验证方式
2020/11/12 Python
CSS3 :default伪类选择器使用简介
2018/03/15 HTML / CSS
会计岗位描述
2014/02/22 职场文书
网络信息安全承诺书
2014/03/26 职场文书
《灰椋鸟》教学反思
2014/04/27 职场文书
辅导员评语
2014/05/04 职场文书
刑事和解协议书范本
2014/11/19 职场文书
golang 实现Location跳转方式
2021/05/02 Golang
nginx反向代理配置去除前缀案例教程
2021/07/26 Servers
V Rising 服务器搭建图文教程
2022/06/16 Servers