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入门教程(11) js事件处理
Jan 31 Javascript
javascript 关闭IE6、IE7
Jun 01 Javascript
JavaScript 浮点数运算 精度问题
Oct 06 Javascript
js+css实现tab菜单切换效果的方法
Jan 20 Javascript
javascript中加var和不加var的区别 你真的懂吗
Jan 06 Javascript
详解JavaScript设计模式开发中的桥接模式使用
May 18 Javascript
JQuery实现动态操作表格
Jan 11 Javascript
详解JavaScript中this的指向问题
Jan 20 Javascript
浅谈高大上的微信小程序中渲染html内容—技术分享
Oct 25 Javascript
vue组件tabbar使用方法详解
Nov 06 Javascript
Vue中Table组件行内右键菜单实现方法(基于 vue + AntDesign)
Nov 21 Javascript
使用vue编写h5公众号跳转小程序的实现代码
Nov 27 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
1982年日本摄影师镜头下的中国孩子 那无忧无虑的童年
2020/03/12 杂记
PHP 异步执行方法,模拟多线程的应用分析
2013/06/03 PHP
PHP实现邮件群发的源码
2013/06/18 PHP
基于命令行执行带参数的php脚本并取得参数的方法
2016/01/25 PHP
PHP简单留言本功能实现代码
2017/06/09 PHP
PHP文件后缀不强制为.php方法
2019/03/31 PHP
JS控件autocomplete 0.11演示及下载 1月5日已更新
2007/01/09 Javascript
Google韩国首页图标动画效果
2007/08/26 Javascript
javascript 解决表单仍然提交即使监听处理函数返回false
2010/03/14 Javascript
原来Jquery.load的方法可以一直load下去
2011/03/28 Javascript
js中有关IE版本检测
2012/01/04 Javascript
js兼容的placeholder属性详解
2013/08/18 Javascript
判断某个字符在一个字符串中是否存在的js代码
2014/02/28 Javascript
jQuery easyUI datagrid 增加求和统计行的实现代码
2016/06/01 Javascript
微信小程序 教程之注册页面
2016/10/17 Javascript
js编写选项卡效果
2017/05/23 Javascript
js模拟百度模糊搜索的实例
2017/08/04 Javascript
JS设计模式之单例模式(一)
2017/09/29 Javascript
ES6 javascript中Class类继承用法实例详解
2017/10/30 Javascript
vue.js实现插入数值与表达式的方法分析
2018/07/06 Javascript
Vue+webpack+Element 兼容问题总结(小结)
2018/08/16 Javascript
浅谈React之状态(State)
2018/09/19 Javascript
Vue使用mixin分发组件的可复用功能
2019/09/01 Javascript
Python并发之多进程的方法实例代码
2018/08/15 Python
Python模拟百度自动输入搜索功能的实例
2019/02/14 Python
在Python中使用Neo4j的方法
2019/03/14 Python
使用Pyhton集合set()实现成果查漏的例子
2019/11/24 Python
如何解决安装python3.6.1失败
2020/07/01 Python
python opencv实现简易画图板
2020/08/27 Python
Python中lru_cache的使用和实现详解
2021/01/25 Python
Noon埃及:埃及在线购物
2019/11/26 全球购物
五年级英语教学反思
2014/01/31 职场文书
2014年民政局关于保密工作整改措施
2014/09/19 职场文书
纪委书记群众路线整改措施思想汇报
2014/10/09 职场文书
出纳工作检讨书范文
2014/12/27 职场文书
Python Django项目和应用的创建详解
2021/11/27 Python