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小实验之函数引用
Nov 17 Javascript
Extjs 3.3切换tab隐藏相应工具栏出现空白解决
Apr 02 Javascript
CheckBoxList多选样式jquery、C#获取选择项
Sep 06 Javascript
jQuery.holdReady()使用方法
May 20 Javascript
jQuery学习笔记之jQuery.fn.init()的参数分析
Jun 09 Javascript
node.js适合游戏后台开发吗?
Sep 03 Javascript
javascript实现控制的多级下拉菜单
Jul 05 Javascript
Jquery实现弹性滑块滑动选择数值插件
Aug 08 Javascript
在AngularJS中如何使用谷歌地图把当前位置显示出来
Jan 25 Javascript
基本DOM节点操作
Jan 17 Javascript
Bootstrap模态窗口源码解析
Feb 08 Javascript
JavaScript运动框架 解决速度正负取整问题(一)
May 17 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
如何在PHP中使用Oracle数据库(3)
2006/10/09 PHP
复杂检索数据并分页显示的处理方法
2006/10/09 PHP
Yii实现多按钮保存与提交的方法
2014/12/03 PHP
PHP实现一维数组转二维数组的方法
2015/02/25 PHP
php 使用mpdf实现指定字段配置字体样式的方法
2019/07/29 PHP
Yii redis集合的基本使用教程
2020/06/14 PHP
JS写的数字拼图小游戏代码[学习参考]
2008/10/29 Javascript
仅Firefox中链接A无法实现模拟点击以触发其默认行为
2011/07/31 Javascript
QQ空间顶部折页撕开效果示例代码
2014/06/15 Javascript
JavaScript参数个数可变的函数举例说明
2014/10/10 Javascript
JQuery插件jcarousellite的参数中文说明
2015/05/11 Javascript
AngularJS的ng Http Request与response格式转换方法
2016/11/07 Javascript
Webpack打包慢问题的完美解决方法
2017/03/16 Javascript
javascript 动态生成css代码的两种方法
2017/03/17 Javascript
整理关于Bootstrap模态弹出框的慕课笔记
2017/03/29 Javascript
JS和JQuery实现雪花飘落效果
2017/11/30 jQuery
详解vue+vuex+koa2开发环境搭建及示例开发
2018/01/22 Javascript
React父子组件间的传值的方法
2018/11/13 Javascript
浅谈小程序globalData的那些事儿
2019/11/01 Javascript
js实现贪吃蛇游戏(简易版)
2020/09/29 Javascript
[03:40]2014DOTA2国际邀请赛 B神专访:躲箭真的很难
2014/07/13 DOTA
讲解Python中if语句的嵌套用法
2015/05/14 Python
python动态进度条的实现代码
2019/07/03 Python
使用Python自动生成HTML的方法示例
2019/08/06 Python
关于Theano和Tensorflow多GPU使用问题
2020/06/19 Python
美国专营婴幼儿用品的购物网站:buybuy BABY
2017/01/01 全球购物
香港通票:Hong Kong Pass
2019/02/26 全球购物
初中政治教学反思
2014/01/17 职场文书
求职信需要的五点内容
2014/02/01 职场文书
环保倡议书范文
2014/05/12 职场文书
学校党的群众路线教育实践活动个人整改方案
2014/10/31 职场文书
2015新年联欢晚会开场白
2014/12/14 职场文书
售票员岗位职责
2015/02/15 职场文书
爱护环境卫生倡议书
2015/04/29 职场文书
九年级化学教学反思
2016/02/22 职场文书
分享python函数常见关键字
2022/04/26 Python