视频1 视频21 视频41 视频61 视频文章1 视频文章21 视频文章41 视频文章61 推荐1 推荐3 推荐5 推荐7 推荐9 推荐11 推荐13 推荐15 推荐17 推荐19 推荐21 推荐23 推荐25 推荐27 推荐29 推荐31 推荐33 推荐35 推荐37 推荐39 推荐41 推荐43 推荐45 推荐47 推荐49 关键词1 关键词101 关键词201 关键词301 关键词401 关键词501 关键词601 关键词701 关键词801 关键词901 关键词1001 关键词1101 关键词1201 关键词1301 关键词1401 关键词1501 关键词1601 关键词1701 关键词1801 关键词1901 视频扩展1 视频扩展6 视频扩展11 视频扩展16 文章1 文章201 文章401 文章601 文章801 文章1001 资讯1 资讯501 资讯1001 资讯1501 标签1 标签501 标签1001 关键词1 关键词501 关键词1001 关键词1501 专题2001
jquery自定义右键菜单、全选、不连续选择_jquery
2020-11-27 20:51:40 责编:小采
文档
 最近在项目中要实现一些自定义效果,例如右键菜单、全选、不连续选择等等,个人认为主要是理清楚逻辑和事件关系。要实现这些,也有现成的插件可以用,如jQuery UI的selectable。

1、右键菜单
当浏览网页时,单击鼠标右键(或ctrl+触模板左键)会出现浏览器默认的右键菜单项,就像这样子的:

但是当要对某个元素自定义右键,像这样子的:

就必须得先禁用浏览器默认的菜单,需要监听contextmenu事件,关键代码如下:



2、全选
默认的ctrl+A(MAC下是command+A)会选择整个网页或者某个获得焦点的可编辑元素。


 

这是个div,这是个div,

这是个div,这是个div,

这是个div,这是个div,

这是个div,这是个div,

这是个div,这是个div,

这是另外一个div,这是另外一个div,

这是另外一个div,这是另外一个div,

这是另外一个div,这是另外一个div,

这是另外一个div,这是另外一个div,

如果页面中只有这两个div,按下ctrl/cmd+A这两个div都会被选中,若只想选择div#box的内容,简单地方式是给该div加上contentEditable=true。另外一种方式就是键盘事件的监听。

模拟选中div#box所有子元素p并高亮:



3、shift实现连续的选择
shift结合鼠标右键实现元素的连续选择,这里对其进行简单模拟。


 

这是个div,这是个div,

这是个div,这是个div,

这是个div,这是个div,

这是个div,这是个div,

这是个div,这是个div,

按住shift时,浏览器有默认的连选,先禁用掉:



对于低版本的IE,利用selectstart事件:



给p注册click事件,同时要监听document对象的keydown和keyup事件:



4、不连续选择
不连续选择需要监听ctrl键(mac下command键),同时给元素注册click事件。



下载本文
显示全文
专题