js应该如何编写右击事件

问题描述

js应该如何编写右击事件

我想实现鼠标右击时，触发某个事件.
应该怎么做呢，求具体代码！

解决方案

非常简洁高效的JS右键菜单

在制作网页的时候,我们很经常需要用到右键菜单,网上这类的控件很多,很眩. 但这类控件一般都比较大,需要写的代码比较多,而且样式比较固定. 而本组件相对简单高效, 定制性很强, 菜单全由自己DIY!

function csMenu(_object, _menu)
{
this.IEventHander = null;
this.IFrameHander = null;
this.IContextMenuHander = null;

this.Show = function(_menu)
{
    var e = window.event || event;
    if (e.button == 2)
    {
        if (window.document.all)
        {
            this.IContextMenuHander = function(){return false;};
            document.attachEvent("oncontextmenu", this.IContextMenuHander);
        }
        else
        {
            this.IContextMenuHander = document.oncontextmenu;
            document.oncontextmenu = function(){return false;};
        }

        window.csMenu$Object = this;
        this.IEventHander = function(){window.csMenu$Object.Hide(_menu);};

        if (window.document.all)
            document.attachEvent("onmousedown", this.IEventHander);
        else
            document.addEventListener("mousedown", this.IEventHander, false);

        _menu.style.left = e.clientX;
        _menu.style.top = e.clientY;
        _menu.style.display = "";

        if (this.IFrameHander)
        {
            var _iframe = document.getElementById(this.IFrameHander);
            _iframe.style.left = e.clientX;
            _iframe.style.top = e.clientY;
            _iframe.style.height = _menu.offsetHeight;
            _iframe.style.width = _menu.offsetWidth;
            _iframe.style.display = "";
        }
    }
};

this.Hide = function(_menu)
{
    var e = window.event || event;
    var _element = e.srcElement;
    do
    {
        if (_element == _menu)
        {
            return false;
        }
    }
    while ((_element = _element.offsetParent));

    if (window.document.all)
     document.detachEvent("on"+e.type, this.IEventHander);
    else
     document.removeEventListener(e.type, this.IEventHander, false);

    if (this.IFrameHander)
    {
        var _iframe = document.getElementById(this.IFrameHander);
        _iframe.style.display = "none";
    }

    _menu.style.display = "none";

    if (window.document.all)
     document.detachEvent("oncontextmenu", this.IContextMenuHander);
    else
     document.oncontextmenu = this.IContextMenuHander;
};

this.initialize = function(_object, _menu)
{
    window._csMenu$Object = this;
    var _eventHander = function(){window._csMenu$Object.Show(_menu);};

    _menu.style.position = "absolute";
 _menu.style.display = "none";
 _menu.style.zIndex = "1000000";

    if (window.document.all)
    {
        var _iframe = document.createElement('iframe');
 document.body.insertBefore(_iframe, document.body.firstChild);
        _iframe.id = _menu.id + "_iframe";
        this.IFrameHander = _iframe.id;

        _iframe.style.position = "absolute";
        _iframe.style.display = "none";
        _iframe.style.zIndex = "999999";
        _iframe.style.border = "0px";
        _iframe.style.height = "0px";
        _iframe.style.width = "0px";

        _object.attachEvent("onmouseup", _eventHander);
    }
    else
    {
        _object.addEventListener("mouseup", _eventHander, false);
    }
};

this.initialize(_object, _menu);

}

=======================需要显示的菜单,一般用DIV======================

打开
打印
回复发件人
全部回复
转发
分配
垃圾邮件
删除
归档此邮件
分拣此邮件
解决方案二：

 document.getElementById("test").onmouseup=function(oEvent) {
    if (!oEvent) oEvent=window.event;
    if (oEvent.button==2) {
        //-- do something for user right click
        // alert("Mouse up");
    }
}

解决方案三：


<script>
    document.oncontextmenu = function () { alert('按下右键！'); }
</script>

解决方案四：

 <html>
<script type="text/javascript">
 <!--
    document.onmousedown = function(e){
        var e = e || window.event
        alert("e"+e.button);
        if(e.button == "2"){
            alert("执行右键代码");
        }
    }
 //-->
 function right()
 {  

        var e=window.event;
        alert(e.button);
        if(e.button=="0"){
            alert("左键");
        }else{
            alert("右键");
        }
 }
 </script>  

<table border=1>
<tr id=test name=test height=200  onmousedown="right()" ><td>88888888888888888888888888</td></tr>
</table>  

</html>

下面是运行效果：

解决方案五：

编写右击事件一般可分为一下几步：
一、捕获，捕获右击事件很简单，楼上的同仁都已做了清楚的回答；
二、阻止默认右击事件，浏览器默认的会为右击事件做出响应，即我们点击右键时看到的菜单，要想対右键点击事件做出明确的响应，这一步是非常重要的一步；
三、编写自己的处理逻辑；

相关文章

  • 编程-为什么我按了计算按扭，没显示出面积结果？
  • jsp-JSP中编写JS代码过程中，调用了一个JSP表达式，发现一个问题，麻烦各位大神解答
  • 初学JS一个关于Popup menu的简单的问题
  • javascript-Easyui-dataview中的datagrid 选中行 右击事件怎么写
  • 右击拖拽不弹出对话框-鼠标右键拖拽图片超链接，拖拽完成后如何不弹出对话框
  • visual stu-在C＃里面添加一段代码，叫网页的右键才到没法使用 ，求救 应该怎么做项目里面有用到EXCEL
  • myeclipse-如何去除代码前的黄色灯泡
  • 关于使用vs2015编写mfc应用程序的问题
  • js-真心求教一个问题，关于编写web的外挂工具app或者桌面程序，具体请进，真心谢谢了
  • javascript-JS touch事件冒泡问题

【云栖快讯】2017互联网超级工程阿里双11完美落幕，交易额突破1682亿，但阿里工程师如何玩转“超级工程”，背后黑科技又是如何？12月13-14日，12位大咖直播分享揭秘1682亿背后技术实践，马上预约  详情请点击

热门推荐

  • 高性能云服务器2折起
  • 云服务器配置
  • 技术资料
  • 云计算
  • 域名
  • shell
  • node.js
  • 问答
  • java
  • mysql
  • C++
  • python
  • jQuery
  • Android
  • asp
  • PHP技巧
  • jQuery教程
  • JavaScript技巧
  • JS
  • SEO
  • sql server
  • mysql教程
  • 前端
  • 技术文集
  • 技术
  • 主题地图
  • A
  • z
  • 云服务器哪家好
  • API
  • 大数据
  • 云安全
  • 云存储
  • 云计算
  • 获取公众号授权失败
  • 兼容性疑难解答
  • path
  • stm32
  • jsonobject
  • product

前三篇

  • 用管理员帐号新建了一个未知类型的文件（test.bdsgroup） 删除时提示无权限
  • IE滚动条自动跑到了最上面
  • jquery mobile 折叠列表的问题

后三篇

  • ruby-【RUBY】Win32下，Process.kill(&amp;quot;INT&amp;quot;,pid)报错
  • remoteviews-RemoteViews是干嘛用的
  • sql2005安装成功后无法使用

(yq.aliyun.com)为您免费提供js应该如何编写右击事件相关信息，包括
js
的信息
，所有js应该如何编写右击事件相关内容均不代表的意见！
该页面h5页面的地址是：https://m.aliyun.com/yunqi/wenzhang/show_65477，您可以点击js应该如何编写右击事件-手机站访问。

时间： 2024-09-29 02:31:23

js应该如何编写右击事件的相关文章

js为鼠标添加右击事件防止默认的右击菜单弹出

本文为大家介绍下如何为使用js为鼠标添加右击事件防止默认的右击菜单弹出,感兴趣的朋友可以参考下,希望对大家有所帮助   复制代码 代码如下: <script language="javascript"> /*document.oncontextmenu=Youji;*/ //为当前文档添加鼠标右击事件,防止默认的右击菜单弹出 function Youji() { alert("右击成功!"); return false; } //为某个dom元素添加鼠标

js为鼠标添加右击事件防止默认的右击菜单弹出_javascript技巧

复制代码 代码如下: <script language="javascript"> /*document.oncontextmenu=Youji;*/ //为当前文档添加鼠标右击事件,防止默认的右击菜单弹出 function Youji() { alert("右击成功!"); return false; } //为某个dom元素添加鼠标右击事件 window.onload = function(){ document.getElementById(&qu

鼠标右击事件代码(asp.net后台)_javascript技巧

js代码如下: 复制代码 代码如下: <script type="text/javascript"> //禁用右键菜单 document.oncontextmenu=ContextMenu; //鼠标右击事件 function ContextMenu() { //创建两个变量,作为菜单出现的坐标 var x; var y; //获取菜单外部Div(下面简称面板) var FramePanel=document.getElementById("FrameDiv&qu

js实现滑动触屏事件监听的方法

  这篇文章主要介绍了js实现滑动触屏事件监听的方法,适用于手机端触屏滑动事件的监听技巧,非常具有实用价值,需要的朋友可以参考下 本文实例讲述了js实现滑动触屏事件监听的方法.分享给大家供大家参考.具体实现方法如下: ? 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 function span_move_fun(){

js鼠标单击和双击事件冲突问题的快速解决方法_javascript技巧

情况一 如果在一个DOM对象上同时绑定单击(click)和双击(dblclick)事件,当在这个DOM对象上发生双击事件时,第一次点击(click)会 触发一次单击(click)事件,第二次点击(连续的)也会触发双击(dblclick)事件,还是会触发单击(click)事件(IE7与 firefox). 解决方法: <button onclick="test(1)" ondblclick="test(2)"></button> <scr

dom-关于js给标签加onclick事件的问题

问题描述 关于js给标签加onclick事件的问题 这是DOM编程艺术书上的一个例程:就是在一个网页中点击链接,将网页中的图片替换,网页大致如下:html源程序如下: 用两种方式写js文件:1.用这种方式写,每次点击显示的都是最后一幅图片 2.用这种方式写就没有问题 请问两者的区别在哪里?其中的工作过程和原理是怎样的? 解决方案 第一种写法target的值肯定是最后一个图的链接,因为for循环不过相当于是给target重复赋值了,结果是最后一次循环的到的值.而你设置click时候,并没有并没有改

JS针对浏览器窗口关闭事件的监听方法集锦_javascript技巧

本文实例总结了JS针对浏览器窗口关闭事件的监听方法.分享给大家供大家参考,具体如下: 方式一:(适用于IE浏览器,而且刷新不提示,只在点击浏览器关闭按钮的时候提示) <script type="text/javascript"> window.onbeforeunload=onclose; function onclose() { if(event.clientX>document.body.clientWidth&&event.clientY<

javascript-求教js当中的监听事件的问题，查了半天，也没有个所以然来，js高手帮帮忙啊

问题描述 求教js当中的监听事件的问题,查了半天,也没有个所以然来,js高手帮帮忙啊 有一个项目,有一个公共的界面,也就是无论做什么操作都会存在一个按钮,我就想在页面未登陆的的时候把按钮隐藏,该怎么做呢??要考虑登录超时跳转登录界面依然能让他隐藏 解决方案 默认隐藏,访问页面的时候自己从session什么的判断是否登录,登录了将信息赋值给一个js变量,然后显示按钮 <input type="button" style="display:none" value=

javascript-jq或js批量添加点击事件

问题描述 jq或js批量添加点击事件 现在需要写一个方法,我批量传入页面的字段名, 然后js或jq在节界面初始化时给我传入的那些字段注册点击事件, 给我大神这个方法怎么写呢. 在线等???? 解决方案 求大神解答,在线急等,跪求,新手 解决方案二: 可以试试把相关字段放在一个数组里面,然后用循环绑定. 大概如下: var arrays = ["ziduan1","ziduan2","ziduan3"]; for(var i=0;i<arra