在博客园博文中添加自定义右键菜单的方法详解

本文是DOM鼠标事件的一个实际应用。查看博客园的博客文章时，有的文章非常长，却没有回到顶部按钮；而且文章的点赞和评论都在文章最底部，使用时并不方便。所以使用自定义右键菜单来实现回到顶部、点赞、评论这三个主要功能,需要的朋友可以参考下

页面设计

首先将这三个功能以一个列表

  顶部
点赞
评论

菜单逻辑

菜单逻辑共包括阻止默认行为、显隐效果和位置判断三个部分

默认行为

通常，点击右键时，会弹出浏览器的默认右侧菜单

通过return false可以实现阻止默认行为的效果，当然也可以使用preventDefault()和returnValue，详细信息移步至此

 document.oncontextmenu = function(){ return false; }

显隐

右键菜单默认隐藏，点击右键时显示，点击左键时再隐藏

关于元素显隐，个人总结过共9种思路，本文就用最简单的display属性

位置判断

鼠标对象共有6对坐标位置信息，若把右键菜单设置为fixed固定定位，则选择clientX/Y即可

一般地，右键菜单的左上角位置应该是当前鼠标的坐标处

但是，还有另外2种情况需要考虑

【1】如果鼠标的位置到视口底部的位置小于菜单的高度，则鼠标的位置为菜单的底部位置

【2】如果鼠标的位置到视口右侧的位置小于菜单的宽度，则视口的右侧为菜单的右侧

元素的尺寸信息共有偏移尺寸offset、可视区尺寸client和滚动尺寸scroll，此时菜单的宽高应该为偏移尺寸offsetWidth/offsetHeight(全尺寸包含width、padding、border)

功能实现

共用有回到顶部、点赞和评论三个功能需要实现

回到顶部

回到顶部共有5种实现方法，下面使用可读写的scrollTop属性进行效果实现

但是，上面的代码有一个问题，就是当页面内容较多时，回到顶部的动画效果将持续很长时间。因此，使用时间版的运动更为合适，假设回到顶部的动画效果共运动500ms，则代码如下所示

点赞函数是博客园自己写的，我们看不到内部函数也无法使用。如果想在右键菜单中使用点赞功能，就需要模拟点击事件。点击右键菜单中的点赞项时，触发博客园的自带的点赞项的click事件

由下图可知，点赞函数加在

上

由一个小例子来说明模拟点击事件如何实现

点击按钮1时，显示1；点击按钮2时，也要实现同样的功能

 
 如法炮制　 点赞

增加获取最新点赞数的功能

当id为'menuFavour'的div元素被点击时，更新点赞数。但，由于从服务器获取最新数据以及相关元素的内容发生变化，都需要时间，所以增加2秒的延迟

 点赞(0赞)

点击右键菜单中的评论项时，页面定位到评论区的位置

由图中可知，评论区为

将元素置于可视区域内有很多方法，如scrollTo()、scrollBy()、通过scrollTop计算、scrollIntoView()方法等等，详细情况移步至此

下面利用scrollIntoView()方法滚动当前元素，进入浏览器的可见区域

 评论

完整源码

将HTML结构和CSS样式写成javascript生成的行为，最终形成一份js文件，代码如下

 //requestAnimationFrame兼容写法 if(!window.requestAnimationFrame){ var lastTime = 0; window.requestAnimationFrame = function(callback){ var currTime = new Date().getTime(); var timeToCall = Math.max(0,16.7-(currTime - lastTime)); var id = window.setTimeout(function(){ callback(currTime + timeToCall); },timeToCall); lastTime = currTime + timeToCall; return id; } } if (!window.cancelAnimationFrame) { window.cancelAnimationFrame = function(id) { clearTimeout(id); }; } //事件处理程序兼容写法 function addEvent(target,type,handler){ if(target.addEventListener){ target.addEventListener(type,handler,false); }else{ target.attachEvent('on'+type,function(event){ return handler.call(target,event); }); } } /*******生成元素*******/ var list = document.createElement('ul'); list.id = 'list'; list.innerHTML = '回到顶部
\ 点赞(0赞)
\ 评论
'; document.body.appendChild(list); /*******添加样式**********/ function loadStyles(str){ var style = document.createElement("style"); style.type = "text/css"; try{ style.innerHTML = str; }catch(ex){ style.styleSheet.cssText = str; } var head = document.getElementsByTagName('head')[0]; head.appendChild(style); } loadStyles("#list{margin: 0!important;\ padding: 0!important;\ width: 120px;\ text-align: center;\ cursor: pointer;\ font:20px/40px '宋体';\ background-color: #eee;\ position:fixed;\ display:none;}\ #list li{list-style:none!important;}\ #list li:hover{background-color: lightblue;color: white;font-weight:bold;}"); //DOM结构稳定后，再操作 addEvent(window,'load', contextMenuLoad); function contextMenuLoad(){ /********显示和隐藏菜单***********/ addEvent(document,'click',function(){ list.style.display = 'none'; }) //右键点击时，菜单显示 document.oncontextmenu = function(e){ e = e || event; //通常情况下，菜单的位置就是鼠标的位置 list.style.left = e.clientX + 'px'; list.style.top = e.clientY + 'px'; //当鼠标的位置到视口底部的位置小于菜单的高度，则鼠标的位置为菜单的底部位置 if(document.documentElement.clientHeight - e.clientY

更多关于在博客园中添加代码的文章请点击下面的相关链接

以上就是在博客园博文中添加自定义右键菜单的方法详解的详细内容，更多请关注0133技术站其它相关文章！