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 相关文章推荐
javascript form 验证函数 弹出对话框形式
Jun 23 Javascript
jquery $.ajax各个事件执行顺序
Oct 15 Javascript
javascript事件冒泡详解和捕获、阻止方法
Apr 12 Javascript
js子页面获取父页面数据示例
May 15 Javascript
JS验证邮件地址格式方法小结
Dec 01 Javascript
深入理解jQuery 事件处理
Jun 14 Javascript
超简单的Vue.js环境搭建教程
Mar 17 Javascript
Vue 过渡实现轮播图效果
Mar 27 Javascript
详解AngularJS跨页面传值(ui-router)
Aug 23 Javascript
Popup弹出框添加数据实现方法
Oct 27 Javascript
js继承的这6种方式!(上)
Apr 23 Javascript
Vue中引入svg图标的两种方式
Jan 14 Vue.js
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
php获取mysql版本的几种方法小结
2008/03/25 PHP
解析php开发中的中文编码问题
2013/08/08 PHP
PHP中filter函数校验数据的方法详解
2015/07/31 PHP
一款JavaScript压缩工具:X2JSCompactor
2007/06/13 Javascript
Extjs实现进度条的两种便捷方式
2013/09/26 Javascript
Node.js中AES加密和其它语言不一致问题解决办法
2014/03/10 Javascript
angularJS提交表单(form)
2015/02/09 Javascript
利用jQuery设计一个简单的web音乐播放器的实例分享
2016/03/08 Javascript
Angularjs使用directive自定义指令实现attribute继承的方法详解
2016/08/05 Javascript
angular基于路由控制ui-router实现系统权限控制
2016/09/27 Javascript
jQuery实现对象转为url参数的方法
2017/01/11 Javascript
node.js实现复制文本到剪切板的功能
2017/01/23 Javascript
详解vue.js2.0父组件点击触发子组件方法
2017/05/10 Javascript
Vue Ajax跨域请求实例详解
2017/06/20 Javascript
Vue 中使用vue2-highcharts实现top功能的示例
2018/03/05 Javascript
vue权限路由实现的方法示例总结
2018/07/29 Javascript
JS+HTML5实现获取手机验证码倒计时按钮
2018/08/08 Javascript
vue+Element实现搜索关键字高亮功能
2019/05/28 Javascript
浅谈vue 锚点指令v-anchor的使用
2019/11/13 Javascript
js实现上传图片并显示图片名称
2019/12/18 Javascript
Windows下安装python2.7及科学计算套装
2015/03/05 Python
Python合并字符串的3种方法
2015/05/21 Python
Python Requests模拟登录实现图书馆座位自动预约
2018/04/27 Python
python计算日期之间的放假日期
2018/06/05 Python
python 地图经纬度转换、纠偏的实例代码
2018/08/06 Python
Python神奇的内置函数locals的实例讲解
2019/02/22 Python
Python多叉树的构造及取出节点数据(treelib)的方法
2019/08/09 Python
Python图像处理库PIL的ImageGrab模块介绍详解
2020/02/26 Python
通过Canvas及File API缩放并上传图片完整示例
2013/08/08 HTML / CSS
伦敦著名的运动鞋综合商店:Footpatrol
2019/03/25 全球购物
班主任经验交流会主持词
2014/04/01 职场文书
女生节标语
2014/06/26 职场文书
十佳好少年事迹材料
2014/08/21 职场文书
2015年店长工作总结范文
2015/04/08 职场文书
Python list列表删除元素的4种方法
2021/11/01 Python
CSS实现鼠标悬浮动画特效
2023/05/07 HTML / CSS