鼠标右键点击事件

学习记录: 最近做了个文档相关的系统,其中用到了鼠标右键点击事件的处理,这里做个学习总结。
实现效果如下图所示:
鼠标右键点击事件_第1张图片
思路整理:

1.MenuList :这数组中放的是显示的内容,我这里给了几个name展示效果,若是后台接口传输数据原理一致。
2.contextmenu.prevent :这是鼠标右击的点击事件,还有一个oncontextmenu 鼠标右击事件,前者是只有火狐浏览器支持,后者是所有浏览器都支持。菜鸟教程解释链接(菜鸟教程右击事件)
3.openMenu :自定义的方法,控制台输出可以判断出e的作用,根据用于判断鼠标右击的位置;item即是点击v-for中name对应的值。
鼠标右键点击事件_第2张图片
4.visible :控制右击后显示的界面是否显示。
5.:style :全局定义left和top,并传给对应右击位置的参数。
6.watch :监听属性,当用户点击其他位置时,关闭visible界面。
7.addEventListener :为元素添加点击事件。(菜鸟教程向指定元素添加事件句柄)

1.HTML代码如下所示:

"app">
"item in MenuList">
@contextmenu.prevent="openMenu($event,item)" style="margin:12px; width:10%;"> {{item.name}}
    "visible" :style="{left:left+'px',top:top+'px'}" class="contextMenu">
  • 查看
  • 删除

2.JS代码如下图所示:


3.CSS样式如下图所示:


以上就是实现右击事件的全部代码,有需要的随便拿,若有不足的地方还望可以指正,共同进步。

你可能感兴趣的:(Web,前端,javascript,前端,css3)