jquery自定义右键菜单 全选 不连续选择

最近项目中要实现一些自定义效果，比如右键菜单、全选、不连续选择等。个人认为主要原因是理解逻辑和事件的关系。为了实现这一点，还有现成的插件，比如jQuery UI的可选。

1.右键菜单浏览网页时，点击鼠标右键(或ctrl触摸模板的左键)会调出浏览器默认的右键菜单项，如下图：

但是当您想要自定义元素的右按钮时，就像这样：

您必须首先禁用浏览器的默认菜单，并且您需要收听contextmenu事件。密钥代码如下：

$(function(){ $('#box '))。on('contextmenu '，function(event){ event . preventdefault()；$(这个)。触发器(' click ')；$('#menulist ')。css({ top: event.pageY，left : event . Pagex })；});$('#box ')。单击(function(){ $('#menulist '))。css('display '，' block ')；});})2.选择默认的Ctrl A(Mac下的命令A)将选择整个网页或获得焦点的可编辑元素。

Id=' box' p class=' first '这是div，这是div。/p p这是一个div，/p p p这是一个div，这是一个div，/p p p这是一个div，这是一个div，/p p p p这是一个div，这是一个div。/p/div div id=' other ' p class=' first '这是另一个div，这是另一个div。/p PP这里是另一个div，这是另一个div。/p PP这里是另一个div，/p PP这里是另一个div，这是另一个div。/p/div如果这是页面上唯一的一个。按ctrl/cmd A选择两个div。如果您只想选择div #框的内容，简单的方法是将contentEditable=true添加到div。另一种方法是监视键盘事件。

选择div #框的所有子元素p，并突出显示它们：

$ (function () {$ (document))。windows下的key down(function(event){//是event。ctrl键if(事件。metakeyevent。其中==65) {event。prevent default()；$('#boxp ')。触发器(' click ')；} });$('#box ')。on('click '，' p '，function(){ $(this)。css('color '，' red ')；});});3.shift实现连续选择shift结合鼠标右键实现元素的连续选择，这里简单模拟一下。

id=' box ' class=' unselect ' p class=' first '这是一个div，这是一个div。/p p这是div，/p p p这是div，这是div，/p p p p这是div，这是div，/p p p p这是div，这是div。/p/。取消选择{-web kit-user-select : none；-moz-用户-选择：无；-ms-user-select : none；-o-用户-选择：无；用户选择：无；}对于较低版本的IE，请使用selectstart事件：

$(“# box”)[0]。onselectstart=function(e){ e . preventdefault()；返回false};p为文档对象注册一个点击事件，并同时监听文档对象的向下键和向上键事件：

$(文档)。keydown(函数(e){ if(e . shift key){ shift key=1；} }).keyup(function(){ shift key=0；});$('#box ')。on('click '，' p '，function(){ if(shift key===1){ second=$(this))。index()；for(var min=Math.min(第一，第二)；min=Math.max(第一，第二)；min ){ $('#box ')。查找(' p ')。eq(最小值)。css('color '，' red ')；} } else { first=$(this)。index()；$(这个)。css('颜色'，'红色')。兄弟姐妹()。css('color '，' black ')；} })4.不连续选择。不连续选择需要监听ctrl键(mac下的command键)并注册元素的click事件。

$(文档)。keydown(函数(e) {if (e. meta key) {//win为e . ctrl key ctrl key=2；} }).keyup(function(){ ctrl key=0；});$('#box ')。on('click '，' p '，function(){ if(ctrl key===2){ $(this)。css('color '，' red ')；} else { $(this)。css('颜色'，'红色')。兄弟姐妹()。css('color '，' black ')；}})以上就是本文的全部内容，希望对大家学习jquery编程有所帮助。