当前位置: 首页 > Web前端 > CSS

绑定右键事件

时间:2023-03-31 13:37:55 CSS

鼠标右键后会出现一个菜单实现此功能1.contextmenu事件右键触发contextmenu事件1.定义与使用绑定该事件。on("contextmenu",handler)removetheevent.off("contextmenu")2.语法$(selector).contextmenu([eventData],handler)3.参数说明eventData是可选的。任何类型传递给事件处理程序的参数对象。处理程序可选。函数类型事件触发时执行的函数。2.显示右键菜单1.鼠标点击事件(默认行为防止鼠标右键点击)1.1文档对象区域监听$(document).on("contextmenu",function(){returnfalse;})1.2某区域Listen$(acertainelement).on("contextmenu",function(){returnfalse;})2.触发鼠标点击事件,获取鼠标所在的浏览器当前位置。clientX/Y提供相对于视口的CSS像素测量坐标HTML部分

  • Add
  • Delete
  • Edit
CSS部分#rMenu{position:absolute;可见性:隐藏;顶部:0;背景:#ccc;text-align:left;}JS部分$(document).on("contextmenu",onRightClick);//鼠标点击别处右键菜单消失$("body").on("mousedown",onBoduMosueDown);functiononBoduMosueDown(){$("#rMenu").CSS({"visibility":"hidden"})}functiononRightClick(event){//鼠标位置varx=e.clientX,y=e.clientY,//获取视口宽度和高度vx=document.documentElement.clientWidth,vy=document.documentElement.clientHeight,//右侧菜单宽度和高度mw=$("#rMenu").offsetWidth,mh=$("#rMenu").偏移高度;返回n{左:(x+mw)>vx?(vx-mw):x,顶部:(y+mh)>vy?(vy-mh):y}$("#rMenu").CSS({"left":x+"px","top":y+"px","visibility":"visible"})//防止鼠标右键单击的默认行为返回false;}

最新推荐
猜你喜欢