微信扫一扫打赏支持

js进阶 12-18 jquery如何实现自定义右键菜单（把问题分细）

js进阶 12-18  jquery如何实现自定义右键菜单（把问题分细）

一、总结

一句话总结：用鼠标右键事件contextmenu，阻止系统默认事件，让做好的右键菜单显示出来，并且显示在我们出现的位置上即可。

 

1、鼠标右击事件是什么事件？

contextmenu事件

 

2、自己遇到功能要实现，而之前没学过怎么办（不可能把所有的功能都讲到都学到）？

先把功能分类，找到是哪一块 然后去查这一块的手册

 

3、要做自己的右键菜单，那么对于系统的右键菜单我们如何操作？

禁止掉，用e.preventDefault阻止掉，return false也可以

26     $(document).contextmenu(function(e){
27         $('#right_menu').show()
28         $('#right_menu').offset({
29             left:e.pageX,
30             top:e.pageY
31         })
32         return false
33         //e.preventDefault()
34     })

 

 

 

二、jquery如何实现自定义右键菜单

1、相关知识

自定义右键菜单

案例描述：实现一个自定义的右键菜单.

案例重点：该案例使用了contextmenu 事件,课程中并未讲过该事件，但是用法和其他事件一样，下午大家能够做到举一反三，遇到没讲过的东西可以自己动手查手册和资料来解决，毕竟课程只是辅助学习，不可能把所有的东西都讲到。

 

2、代码

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <style>
 4 </style>
 5 <head>
 6     <meta charset="UTF-8">
 7     <title>演示文档</title>
 8     <script type="text/javascript" src="jquery-3.1.1.min.js"></script>
 9     <style type="text/css">
10         #right_menu{
11             border:1px solid;border-radius: 5px;background: rgba(100,50,30,0.3);padding:5px;position: absolute;display: none;
12         }
13     </style>
14 </style>
15 </head>
16 <body>
17 <div id="right_menu">
18     <ul>
19         <li>收藏......</li>
20         <li>分享......</li>
21         <li>转发......</li>
22         <li>......</li>
23     </ul>
24 </div>
25     <script>
26     $(document).contextmenu(function(e){
27         $('#right_menu').show()
28         $('#right_menu').offset({
29             left:e.pageX,
30             top:e.pageY
31         })
32         return false
33         //e.preventDefault()
34     })
35     $(document).click(function(){
36         $('#right_menu').hide()
37     })
38     </script>
39 </body>
40 </html>

 

 

 

 

 
posted @ 2018-07-13 13:07  范仁义  阅读(559)  评论(0)  编辑  收藏  举报