JavaScript 对任意元素,自定义右键菜单的实现方法_基础知识

一、一些概念:

  1、鼠标事件有一个botton属性:返回一个整数,用于表示点击的是哪个鼠标按键。
  BUG:在IE和标准DOM的鼠标事件中,唯一一个button属性值相同的是“单击右键”事件,都返回2。

  2、事件onmousedown:表示鼠标按键按下的动作。
    事件oncontextmenu:点击鼠标触发的另一个事件。

  3、中断默认事件处理函数的方法:IE中设置returnValue=false;  标准DOM中调用preventDefault()方法。

  4、事件对象:①在IE中,事件对象是window对象的一个event属性。

          声明:

 

         ②在标准DOM中,事件对象是事件处理函数的唯一参数。

          声明:

 

      解决兼容性:

 

二、实现:

HTML:

复制代码 代码如下:

    <p id="p1">Uncle Cat is a fat white cat !</p>
    <div id="d1">
        <a>剪切</a>
        <a>复制</a>
        <a>粘贴</a>
    </div>

javascript:

复制代码 代码如下:

window.onload=function(){
    rightmenu('p1','d1');
}
/****
*     封装右键菜单函数:
*    elementID   要自定义右键菜单的 元素的id
*    menuID    要显示的右键菜单DIv的 id
*/
function rightmenu(elementID,menuID){
  var menu=document.getElementById(menuID);      //获取菜单对象
  var element=document.getElementById(elementID);//获取点击拥有自定义右键的 元素
  element.onmousedown=function(aevent){         //设置该元素的 按下鼠标右键右键的 处理函数
    if(window.event)aevent=window.event;      //解决兼容性
    if(aevent.button==2){                   //当事件属性button的值为2时,表用户按下了右键
      document.oncontextmenu=function(aevent){
       if(window.event){
           aevent=window.event;
        aevent.returnValue=false;         //对IE 中断 默认点击右键事件处理函数
      }else{
        aevent.preventDefault();          //对标准DOM 中断 默认点击右键事件处理函数
      };
    };
    menu.style.cssText='display:block;top:'+aevent.clientY+'px;'+'left:'+aevent.clientX+'px;'
    //将菜单相对 鼠标定位
    }
  }
  menu.onmouseout=function(){                  //设置 鼠标移出菜单时 隐藏菜单
    setTimeout(function(){menu.style.display="none";},400);
  }
}

时间: 2024-10-28 03:32:42

JavaScript 对任意元素,自定义右键菜单的实现方法_基础知识的相关文章

详解JavaScript中|单竖杠运算符的使用方法_基础知识

js运算符单竖杠"|"的作用 在js整数操作的时候,相当于去除小数点,parseInt.在正数的时候相当于Math.floor(),负数的时候相当于Math.ceil() 注: 1. Math.ceil()用作向上取整. 2. Math.floor()用作向下取整. 3. Math.round() 我们数学中常用到的四舍五入取整. console.log(0.6|0)//0 console.log(1.1|0)//1 console.log(3.65555|0)//3 console.

JavaScript中使用Math.PI圆周率属性的方法_基础知识

 这将返回一个圆到其直径的圆周的比率,大约3.14159.语法 Math.PI 例子: <html> <head> <title>JavaScript Math PI Property</title> </head> <body> <script type="text/javascript"> var property_value = Math.PI document.write("Prope

JavaScript中用于生成随机数的Math.random()方法_基础知识

 此方法返回0(含)和1(不包括)之间的随机数语法 Math.random() ; 下面是参数的详细信息:     NA 返回值: 返回0(含)和1(不包括)之间的随机数 例子: <html> <head> <title>JavaScript Math random() Method</title> </head> <body> <script type="text/javascript"> var v

简介JavaScript中用于处理正切的Math.tan()方法_基础知识

 这个方法返回一个数字的正切值.tan 方法返回表示的角度的正切值.语法 Math.tan( x ) ; 下面是参数的详细信息:     x: 一个数字,表示以角度表示弧度 返回值: 返回一个数字的正切值 例子: <html> <head> <title>JavaScript Math tan() Method</title> </head> <body> <script type="text/javascript&q

JavaScript中Array 对象相关的几个方法_基础知识

push 方法将新元素添加到一个数组中,并返回数组的新长度值. arrayObj.push([item1 [item2 [. . . [itemN ]]]]) 参数arrayObj 必选项.一个 Array 对象. item, item2,. . . itemN 可选项.该 Array 的新元素. 说明push 方法将以新元素出现的顺序添加这些元素.如果参数之一为数组,那么该数组将作为单个元素添加到数组中.如果要合并两个或多个数组中的元素,请使用 concat 方法. 示例 <script ty

基于JavaScript实现 获取鼠标点击位置坐标的方法_基础知识

在一些DOM操作中我们经常会跟元素的位置打交道,鼠标交互式一个经常用到的方面,令人失望的是不同的浏览器下会有不同的结果甚至是有的浏览器下没结果,这篇文章就上鼠标点击位置坐标获取做一些简单的总结,没特殊声明代码在IE8,FireFox,Chrome下进行测试兼容 鼠标点击位置坐标相对于屏幕 如果是涉及到鼠标点击确定位置相对比较简单,获取到鼠标点击事件后,事件screenX,screenY获取的是点击位置相对于屏幕的左边距与上边距,不考虑iframe因素,不同浏览器下表现的还算一致. 复制代码 代码

关于JavaScript的变量的数据类型的判断方法_基础知识

  虽然Javascript是弱类型语言,但是,它也有自己的几种数据类型,分别是:Number.String.Boolean.Object.Udefined.Null.其中,Object属于复杂数据类型,Object   由无序的键值对组成.其余几种都属于简单数据类型.注意:变量类型首字母大写,而变量值首字母是小写的.   JavaScript不支持自定义类型,所以JavaScript中的所有值都属于这六种类型之一.   要搞清楚一个变量是何种数据类型,就要使用typeof操作符了,注意,尤其要

深入了解JavaScript中的Symbol的使用方法_基础知识

Symbol 是什么? Symbols 不是图标,也不是指在代码中可以使用小图片: 也不是指代其他一些东西的语法.那么,Symbol 到究竟是什么呢?七种数据类型 JavaScript 在 1997 年被标准化时,就有 6 种数据类型,直到 ES6 出现之前,程序中的变量一定是以下 6 种数据类型之一:     Undefined     Null     Boolean     Number     String     Object 每种数据类型都是一系列值的组合,前面 5 种数据类型值的数

用JavaScript获取DOM元素位置和尺寸大小的方法_基础知识

在一些复杂的页面中经常会用JavaScript处理一些DOM元素的动态效果,这种时候我们经常会用到一些元素位置和尺寸的计算,浏览器兼容性问题也是不可忽略的一部分,要想写出预想效果的JavaScript代码,我们需要了解一些基本知识. 基础概念 为了方便理解,我们需要了解几个基础概念,每个HTML元素都有下列属性 offsetWidth clientWidth scrollWidth offsetHeight clientHeight scrollHeight offsetLeft clientL