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>
540
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
