js自定义右键菜单
2016-08-11 18:01
267 查看
请在这里查看示例 ☞ contextmenu示例
兼容性:ie8+
兼容性:ie8+
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalable=no"> <meta http-equiv=”X-UA-Compatible” content=”IE=edge,chrome=1″/> <link rel="stylesheet" href="http://v3.faqrobot.org/hvb/com/css/reset.css?dev=1"> <script type="text/javascript" src="http://v3.faqrobot.org/hvb/com/js/jquery-1.11.3.min.js?dev=1"></script> <script type="text/javascript" src="http://v3.faqrobot.org/hvb/com/js/base.js?dev=1"></script> <title>svg</title> <style> body, html { width: 100%; height: 100%; } </style> </head> <body> <script> ;$(function() { $(document).on('contextmenu', function(e) { if($('.CM_contextmenu')[0]) { }else { var $style = $('<style>.CM_contextmenu{width:200px;padding:2px 0;position:fixed;z-index:99999;background:#fff;border:1px solid #ddd;}.CM_item{padding:5px 10px;position:relative;cursor:default;font-size:12px;}.CM_item:hover{color:#fff;background:#4281F4;}</style>').appendTo('head'); var $div = $('<div class="CM_contextmenu"><div class="CM_reload CM_item">重新加载</div><div class="CM_check CM_item">检查</div></div>').appendTo('body'); } $('.CM_contextmenu').show().css({ left: e.clientX, top: e.clientY, }); return false; }); //隐藏 $('body').on('click', function(e) { if(!$(e.target).is('.CM_contextmenu') && !$(e.target).is('.CM_item')) { $('.CM_contextmenu').hide(); } }); //重新加载 $('body').on('click', '.CM_reload', function() { $('.CM_contextmenu').hide(); document.location.reload(); }); }); </script> </body> </html>
相关文章推荐
- JavaScript使用技巧45招
- JS面向对象逆向学习法,让难理解的统统一边去(1)~
- JSON解析首字母大写的字符串
- javascript 从定义到执行,你不知道的那些事
- 将key名不带双引号的JSON字符串转换成JSON对象的方法
- 把user对象里面的数据解析成json格式
- ExtJS4 树节点checkbox选中问题
- 把json格式的字符串存入到对象中
- Javascript缓存API
- 你未必知道的12个JavaScript技巧
- gson解析json
- JavaScript里的数组转化新方法Array.From
- JS15位或18位的身份证校验
- JavaScript里的循环方法:forEach,for-in,for-of
- javascript里的sleep()方法
- 41个Web开发者必须收藏的JavaScript实用技巧
- 前端程序员必须知道的高性能Javascript知识
- js插件开发规范
- Jsoncpp链接失败问题解决
- FastJSON