在网页中有时间需要添加比较复杂的菜单操作,在Windows中可以使用右键菜单,但在网页中右键事件默认是被浏览器处理了,那么可不可以自定义控件的右键点击事件呢?答案当然是可以的。
还是上代码:
![](https://i-blog.csdnimg.cn/blog_migrate/8f900a89c6347c561fdf2122f13be562.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/961ddebeb323a10fe0623af514929fc1.gif)
1 /****************右键菜单******************/ 2 ; (function ($, window, document, undefined) { 3 $.fn.rightClick = function (onClick) { 4 var $this = $(this); 5 6 if (!$$.isFunction(onClick)) { 7 return; 8 } 9 10 $this.bind("contextmenu", function () { 11 return false; 12 }); 13 14 $this.on("mousedown", function (e) { 15 if (e.which == 3) { 16 onClick(e); 17 return false; 18 } 19 }); 20 } 21 22 var menu = function (ele, opt) { 23 var $this = this; 24 25 $this.$element = $(ele); 26 $this._default = { 27 position: { 28 x: 0, 29 y: 0 30 }, 31 menuList: [], 32 hideAfterMenuClick: true 33 }; 34 $this.option = $.extend(true, {}, $this._default, opt); 35 $this.controlId = $$.generateId(); 36 $this.removeTimeOut = []; 37 } 38 39 menu.prototype = { 40 initCss: function () { 41 var $this = this; 42 43 var $cssContainer = $(document).find("head"); 44 if ($cssContainer.length == 0) { 45 $cssContainer = $(document).find("body"); 46 } 47 48 if ($cssContainer.length == 0) { 49 return; 50 } 51 52 if ($cssContainer.find("#bsmenucss").length > 0) { 53 return; 54 } 55 56 $cssContainer.append("\ 57 <style id='bsmenucss'>\ 58 .md-container { position: fixed; display: inline-block; min-width:100px; box-shadow: 0 0 3px 3px #888; padding: 5px; background-color: #FFF; border-radius: 2px; }\ 59 .md-container .close { display: inline-block; position: absolute; top: 4px; right: 4px; border: 1px solid #000; color: #000; width: 20px; height: 20px; border-radius: 10px; font-size: 16px; text-align: center; line-height: 20px; }\ 60 .md-container ul { display: inline-block; list-style: none; padding: 0; margin: 0; }\ 61 .md-container ul li { display: inline-block; list-style: none; cursor: pointer; width: 100%; border: 1px solid #FFF; border-radius: 2px; padding: 2px 4px; text-shadow: 2px 2px 4px #888; }\ 62 .md-container ul li:hover { border: 1px solid #DDD; background-color: #DDD; }\ 63 </style>"); 64 }, 65 show: function () { 66 var $this = this; 67 68 $this.initCss(); 69 70 if (!$$.isEnumerable($this.option.menuList)) { 71 return; 72 } 73 74 $this.menuContainer = $(document).find("body"); 75 76 $this.menuContainer.find(".md-container").remove(); 77 78 var menuHtml = $$.format("\ 79 <div id='md{0}' class='md-container' style='top:{1}px;left:{2}px;'>\ 80 <span class='close'>×</span>\ 81 <ul>", $this.controlId, $this.option.position.y, $this.option.position.x); 82 83 for (var i = 0; i < $this.option.menuList.length; i++) { 84 var menuItem = $this.option.menuList[i]; 85 86 menuHtml += $$.format("<li data-index='{0}' title='{1}'>{2}</li>", i, menuItem.title, menuItem.name); 87 } 88 89 menuHtml += "\ 90 </ul>\ 91 </div>"; 92 setTimeout(function () { 93 $this.menuContainer.append(menuHtml); 94 95 $this.delayRemove(500); 96 97 $this.menuDialog = $this.menuContainer.find("#md" + $this.controlId); 98 $this.menuDialog.on("mouseover", function () { 99 if (!$$.isEnumerable($this.removeTimeOut)) { 100 return; 101 } 102 103 $this.status = "normal"; 104 105 for (var i = 0; i < $this.removeTimeOut.length; i++) { 106 clearTimeout($this.removeTimeOut[i]); 107 } 108 109 $this.removeTimeOut = []; 110 }); 111 $this.menuDialog.on("mouseleave", function () { 112 $this.delayRemove(400); 113 }); 114 $this.menuDialog.on("click", ".close", function () { 115 setTimeout(function () { $this.remove(); }, 100); 116 return false; 117 }); 118 $this.menuDialog.on("click", "li", function () { 119 var $li = $(this); 120 121 var $index = $$.soe($li.attr("data-index")).toInt(-1); 122 if ($index < 0 || $index >= $this.option.menuList.length) { 123 return; 124 } 125 126 var menuItem = $this.option.menuList[$index]; 127 if ($$.isFunction(menuItem.onClick)) { 128 menuItem.onClick(); 129 if ($this.option.hideAfterMenuClick) { 130 setTimeout(function () { $this.remove(); }, 100); 131 } 132 } 133 }); 134 }, 300); 135 }, 136 delayRemove: function (interval) { 137 var $this = this; 138 139 interval = $$.soe(interval).toInt(400); 140 141 $this.status = "removing"; 142 $this.removeTimeOut.push(setTimeout(function () { 143 if ($this.status != "removing") { 144 return; 145 } 146 147 $this.remove(); 148 }, interval)); 149 }, 150 remove: function () { 151 this.menuDialog.remove(); 152 } 153 } 154 155 $.fn.bsMenu = function (option) { 156 var result = new menu(this, option); 157 result.show(); 158 return result; 159 } 160 })(jQuery, window, document); 161 /*****************************************/
使用:
1 使用: 2 <script> 3 $(function () { 4 $(".right-click-test").rightClick(function (e) { 5 var position = {}; 6 position.x = e.pageX; 7 position.y = e.pageY; 8 9 $(this).bsMenu({ 10 position: position, 11 menuList: [ 12 { 13 name: "12345", 14 title: "12345", 15 onClick: function () { 16 console.log("12345") 17 } 18 }, 19 { 20 name: "abcdefghi", 21 title: "abcdefghi", 22 onClick: function () { 23 console.log("abcdefghi") 24 } 25 } 26 ] 27 }); 28 }); 29 }); 30 </script> 31 32 <span class="right-click-test">右键点击事件</span>
插件引用了bootstrap的样式,以及前面随笔的JS扩展。
效果如下图: