绑定右键事件

maxmin 发布于2019-08-29 13:13 / 416人阅读

摘要：右键单击鼠标后会出现一个菜单，实现这个功能一事件单击右键触发事件定义和用法绑定该事件移除该事件语法参数描述可选。任意类型传递给事件处理程序的参数对象。类型事件触发时执行的函数。

右键单击鼠标后会出现一个菜单，实现这个功能

一. contextmenu 事件

单击右键触发 contextmenu 事件

1.定义和用法

绑定该事件 .on( "contextmenu", handler )
移除该事件 .off( "contextmenu" )

2.语法

$(selector).contextmenu( [eventData ], handler )

3.参数描述

eventData 可选。任意类型传递给事件处理程序的参数对象。
handler 可选。 Function类型事件触发时执行的函数。

二. 显示右侧菜单

1.鼠标点击事件(阻止鼠标右键单击的默认行为)

1.1 document对象区域监听

$(document).on("contextmenu",function(){
     return false;
})

1.2 某一区域监听

$(某一元素).on("contextmenu",function(){
     return false;
})

2.触发鼠标点击事件，获取鼠标当前所在浏览器的位置

clientX/Y 提供了相对于viewport的以CSS像素度量的坐标

HTML部分

    
        新增
        删除
        编辑
    

CSS部分
#rMenu{
    position:absolute;
    visibility:hidden;
    top:0;
    background:#ccc;
    text-align:left;
}
JS部分
$(document).on("contextmenu",onRightClick);
//鼠标点击其他地方右键菜单消失
$("body").on("mousedown",onBoduMosueDown);
function onBoduMosueDown(){
      $("#rMenu").CSS({"visibility":"hidden"})   
}
function onRightClick(event){
    //鼠标位置
    var x = e.clientX ,y = e.clientY , 
    //获取视口宽高
    vx = document.documentElement.clientWidth , 
    vy = document.documentElement.clientHeight,
    //右侧菜单宽高
    mw =  $("#rMenu").offsetWidth, mh =  $("#rMenu").offsetHeight;
    return {
        left : (x + mw) > vx ? (vx - mw ) : x,
        top : (y + mh) > vy ? (vy - mh ) : y
    }
    $("#rMenu").CSS({"left":x + "px","top":y + "px","visibility":"visible"})
    //阻止鼠标右键单击的默认行为
    return false;
}

GPU云服务器云服务器事件绑定重复绑定事件绑定点击事件 javascript事件绑定

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/112453.html

绑定右键事件

摘要：右键单击鼠标后会出现一个菜单，实现这个功能一事件单击右键触发事件定义和用法绑定该事件移除该事件语法参数描述可选。任意类型传递给事件处理程序的参数对象。类型事件触发时执行的函数。右键单击鼠标后会出现一个菜单，实现这个功能一. contextmenu 事件单击右键触发 contextmenu 事件 1.定义和用法绑定该事件 .on( contextmenu, handler ) 移...

Allen 2019-08-20 18:56 评论0 收藏0
教你如何解决IE9的输入框input事件无法监听右键菜单的剪切、撤销、删除对内容的改变的问题

摘要：原来对全局的事件进行监听，一旦发现就会尝试触发当前文档激活对象的事件。事件需要注意的点事件只能绑定在接口对象上，其他元素绑定无效，而且不可以取消也不能冒泡需要注意的是上右键菜单的剪切并不会触发事件浏览器从开始支持相关文档文章起因看Vue源代码内置指令时，发现了Vue对于IE9的selectionchange事件做了特殊处理，这引起了我的兴趣。原来Vue对全局的selectionch...

沈建明 2019-08-23 14:04 评论0 收藏0
[译][Tkinter 教程15] event 事件绑定

摘要：已获原作者授权原系列地址简介一个应用生命周期中的大部分时间都处在一个消息循环中它等待事件的发生事件可能是按键按下鼠标点击鼠标移动等提供了用以处理相关事件的机制处理函数可以被绑定给各个控件的各种事件如果相关事件发生函数会被触发事件对象会传递给已获原作者授权. 原系列地址: Python Tkinter 简介一个 Tkinter 应用生命周期中的大部分时间都处在一个消息循环 (eve...

zhkai 2019-07-30 16:08 评论0 收藏0
javascript event 对象（事件对象）

摘要：什么是事件对象在触发上的某个事件时，会产生一个事件对象。包括导致事件的元素，事件的类型以及其他与特定事件相关的信息。键盘操作导致的事件对象中，会包含按下的键有关的信息。取消默认行为，取消右键菜单阻止默认事件环境菜单，上下文菜单什么是事件对象？在触发DOM上的某个事件时，会产生一个事件对象event。这个对象中包含着所有与事件有关的信息。包括导致事件的元素，事件的类型以及其他与特定事...

zilu 2019-08-26 12:18 评论0 收藏0
JavaScript 事件简介

摘要：事件流包括两种模式冒泡和捕获。和事件名，函数，此方法不支持仅仅支持两个参数事件名称事件回调。事件中没有这个属性。鼠标相对于事件源元素的左边界上边界坐标，只有事件有这个属性，标准事件没有对应的属性。事件事件的概念事件就是文档或浏览器窗口中发生的一些特定的交互瞬间【触发与响应】事件触发：用户在页面上操作(如点击按钮, 鼠标滑过, 鼠标点击, 鼠标松开, 文本框获得焦点, 失去焦点等)...

makeFoxPlay 2019-08-02 14:04 评论0 收藏0