基于jQuery的鼠标右键菜单

对于自制的鼠标右键功能，我们应该考虑哪些因素呢？

一、涉及因素

1、阻止默认鼠标右键事件。

3、右键事件，使菜单出现。

2、考虑右键菜单出现的位置，是否超出窗口。

4、点击窗口任意位置，菜单消失。

二、具体代码及分析如下：

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title>基于jQuery鼠标右键菜单</title><style type="text/css">* {margin: 0;padding: 0;font-family: "微软雅黑";box-sizing: border-box;list-style: none;}h2 {margin: 100px auto;width: 500px;padding: 20px;font-size: 30px;letter-spacing: 10px;color: #FFFFFF;text-align: center;border-top: 3px solid #d56f22;border-bottom: 3px solid #d56f22;border-radius: 10px;}.contextmenu {display: none;position: absolute;width: 200px;background: #FFFFFF;border-radius: 5px;overflow: hidden;z-index: 99;}.contextmenu li {border-left: 3px solid transparent;transition: ease 0.3s;}.contextmenu li:hover {background: #CE93D8;border-left: 3px solid #9C27B0;}.contextmenu li a {display: block;padding: 10px;color: #000000;text-decoration: none;transition: ease 0.3s;}.contextmenu li:hover a {color: #FF0000;}</style></head><body style="background: #2C3E50;"><h2>提示：鼠标右键点击</h1><ul class="contextmenu"><li><a href="">百度</a></li><li><a href="#">搜狐</a></li><li><a href="#">搜狗</a></li><li><a href="#">必应</a></li><li><a href="#">网易</a></li></ul></body></html>
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
<script type="text/javascript">// 文档加载后激活函数$(document).ready(function() {// 鼠标右键事件$(document).contextmenu(function(e) {// 获取窗口尺寸var winWidth = $(document).width();var winHeight = $(document).height();// 鼠标点击位置坐标var mouseX = e.pageX;var mouseY = e.pageY;// ul标签的宽高var menuWidth = $(".contextmenu").width();var menuHeight = $(".contextmenu").height();// 最小边缘margin(具体窗口边缘最小的距离)var minEdgeMargin = 10;// 以下判断用于检测ul标签出现的地方是否超出窗口范围// 第一种情况：右下角超出窗口if(mouseX + menuWidth + minEdgeMargin >= winWidth &&mouseY + menuHeight + minEdgeMargin >= winHeight) {menuLeft = mouseX - menuWidth - minEdgeMargin + "px";menuTop = mouseY - menuHeight - minEdgeMargin + "px";}// 第二种情况：右边超出窗口else if(mouseX + menuWidth + minEdgeMargin >= winWidth) {menuLeft = mouseX - menuWidth - minEdgeMargin + "px";menuTop = mouseY + minEdgeMargin + "px";}// 第三种情况：下边超出窗口else if(mouseY + menuHeight + minEdgeMargin >= winHeight) {menuLeft = mouseX + minEdgeMargin + "px";menuTop = mouseY - menuHeight - minEdgeMargin + "px";}// 其他情况：未超出窗口else {menuLeft = mouseX + minEdgeMargin + "px";menuTop = mouseY + minEdgeMargin + "px";};// ul菜单出现$(".contextmenu").css({"left": menuLeft,"top": menuTop}).show();// 阻止浏览器默认的右键菜单事件return false;});// 点击之后，右键菜单隐藏$(document).click(function() {$(".contextmenu").hide();});});
</script>

三、效果图

基于jQuery的鼠标右键菜单相关推荐

openlayer右键菜单_使用OpenLayers3 添加地图鼠标右键菜单
添加右键菜单,首先我们要监听鼠标右键点击的操作,我们知道鼠标右键事件名是 contextmenu,当鼠标在 html 元素之上,点击鼠标右键,便会触发 contextmenu 事件,在 context ...
JQuery之ContextMenu(右键菜单)
JQuery之ContextMenu(右键菜单) 插件下载地址: http://www.trendskitchens.co.nz/jquery/contextmenu/jquery.contextme ...
Silverlight 4.0添加鼠标右键菜单和Silverlight全屏模式的进入退出
说明:本文出处:http://www.cnblogs.com/chengxingliang/archive/2011/02/14/1954399.html#2627673(非常感谢) 在实际应用中,我 ...
jquery-11 如何制作鼠标右键菜单
jquery-11 如何制作鼠标右键菜单一.总结一句话总结:核心原理:找到右键菜单事件contextmenu,return false去掉默认事件,然后判断用户是否点的右键,然后在鼠标的位置显示菜 ...
基于jQuery垂直多级导航菜单代码
基于jQuery垂直多级导航菜单代码是一款黑色风格的jQuery竖直导航菜单特效下载.效果图如下: 在线预览源码下载实现的代码. html代码: <ul class="ce& ...
安装ATi显卡驱动后增加的鼠标右键菜单的清理
一般最直接的方法是: 一般位于注册表的: 删除注册表HKEY_CLASSES_ROOT\Directory \Background\shellex\ContextMenuHandlers\ACE下 a ...
自定义html页面鼠标右键,javascript鼠标右键菜单自定义效果
本文实例讲解了javascript鼠标右键菜单的实现方法,分享给大家供大家参考,具体内容如下效果图: 具体代码: #menu{ border:solid 1px gray; width:100px; ...
html 元素允许右键,JavaScript 自定义html元素鼠标右键菜单功能
自定义html元素鼠标右键菜单实现思路在触发contextmenu事件时,取消默认行为(也就是阻止浏览器显示自带的菜单),获取右键事件对象,来确定鼠标的点击位置,作为显示菜单的left和top值 ...
WinForm -- 为TextBox文本框添加鼠标右键菜单
WinForm -- 为TextBox文本框添加鼠标右键菜单 1. 新建一个WinForm项目,放置一个TextBox控件 2. 从工具箱拖进来一个ContextMenuStrip 3. 将TextB ...

基于jQuery的鼠标右键菜单

基于jQuery的鼠标右键菜单相关推荐

最新文章

热门文章