视频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
js自定义鼠标右键的实现原理及源码_javascript技巧
2020-11-27 21:24:50 责编:小采
文档

今天来记录下js来自定义鼠标右键,同样先来分解下它的实现原理:

1、屏蔽右键默认事件;(一度我以为修改的就是默认事件)

2、对一个ul的隐藏;(这个我也曾迂腐的认为值得这样操作的都是div,汗)

3、对鼠标点击右键做出的响应,显示隐藏的ul;

4、鼠标重新点击后,ul重新被隐藏

这样来看的话,我们需要做的事情是不是就简单了很多,先上代码:

html部分

 
  • 开始
  • 暂停
  • 拜拜
  • javascript部分:

    
    
    


    先来看今天记录的最关键的地方:document.oncontextmenu这个事件返回false的话就是屏蔽默认事件,如果我们其他都不写,只在这个事件里面写return,好像就下面这样

    
    
    

    这样的话,再点击右键也不会出现任何响应了。然后返回来再看整个的事件应用,好像除了这个事件,其他的都是比较熟悉的事件了,可就是对事件的这种整合总是缺乏,关键还是思路是创意吧,不过先不管哪儿多了,先整吧,但求熟读三千首,不求写来只问吟。扎马步,扎马步,扎马步.....

    下载本文
    显示全文
    专题