博客园博文添加自定义右键菜单

前面的话

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

页面设计

　　首先将这三个功能以一个列表<ul>的形式放置。鼠标移入时样式改变，移出时还原

<style>
body{margin: 0;}
ul{
    margin: 0;
    padding: 0;
    list-style: none;
}
.list{
    width: 100px;
    text-align: center;
    cursor: pointer;
    font:20px/40px  '宋体';
    background-color: #eee;
}
.in:hover{
    background-color: lightblue;
    color: white;
    font-weight:bold;
}
</style>

<ul id="list" class="list">
    <li class="in">顶部</li>
    <li class="in">点赞</li>
    <li class="in">评论</li>
</ul>

菜单逻辑

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

默认行为

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

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

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

显隐

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

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

<div id="test" style="height: 100px;width: 100px;background-color: pink;"></div>
<script>
document.onclick = function(){
    test.style.display = 'none';
}
document.oncontextmenu = function(){
    test.style.display = 'block';
    return false;
}
</script>

位置判断

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

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

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

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

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

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

<div id="test" style="position:fixed;height: 100px;width: 100px;background-color: pink;"></div>
<script>
document.onclick = function(){
    test.style.display = 'none';
}
document.oncontextmenu = function(e){
    e = e || event;
    test.style.left = e.clientX + 'px';
    test.style.top = e.clientY + 'px';
    //注意，由于加法、减法的优先级高于大于、小于的优先级，所以不用加括号，详细情况移步至此
    if(document.documentElement.clientHeight - e.clientY < test.offsetHeight){
        test.style.top = e.clientY - test.offsetHeight + 'px';
    }
    if(document.documentElement.clientWidth - e.clientX < test.offsetWidth){
        test.style.left = document.documentElement.clientWidth - test.offsetHeight + 'px';
    }
    test.style.display = 'block';
    return false;
}
</script>

功能实现

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

回到顶部

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

<body style="height: 3000px;">
<button id="test" style="position:fixed;right:10px;bottom:10px;">回到顶部</button>
<script>
var timer  = null;
test.onclick = function(){
    cancelAnimationFrame(timer);
    timer = requestAnimationFrame(function fn(){
        var oTop = document.body.scrollTop || document.documentElement.scrollTop;
        if(oTop > 0){
            document.body.scrollTop = document.documentElement.scrollTop = oTop - 160;
            timer = requestAnimationFrame(fn);
        }else{
            cancelAnimationFrame(timer);
        }    
    });
}
</script>
</body>

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

<body style="height: 2000px;">
<button id="test" style="position:fixed;right:10px;bottom:10px;">回到顶部</button>
<script>
var timer  = null;
test.onclick = function(){
    cancelAnimationFrame(timer);
    //获取当前毫秒数
    var startTime = +new Date();     
    //获取当前页面的滚动高度
    var b = document.body.scrollTop || document.documentElement.scrollTop;
    var d = 500;
    var c = b;
    timer = requestAnimationFrame(function func(){
        var t = d - Math.max(0,startTime - (+new Date()) + d);
        document.documentElement.scrollTop = document.body.scrollTop = t * (-c) / d + b;
        timer = requestAnimationFrame(func);
        if(t == d){
          cancelAnimationFrame(timer);
        }
    });
}
</script>
</body>

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

　　由下图可知，点赞函数加在<div class="diggit">上

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

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

<button id="btn1">按钮1</button>
<button id="btn2">按钮2</button>
<div id="result" style="height: 30px;width: 100px;background-color: pink;"></div>
<script>
btn1.onclick= function(){
    result.innerHTML += '1';
}
btn2.onclick = btn1.onclick;
</script>

　　如法炮制　

<div id="test">点赞</div>
<script>
window.onload = function(){
　　test.onclick = document.getElementById('div_digg').children[0].onclick;    
}
</script>

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

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

<div id="menuFavour">点赞(<span id="favourNum">0</span>赞)</div>
<script>
//模拟原始点赞按钮的点击事件
menuFavour.onclick = document.getElementById('div_digg').children[0].onclick;  

//获取赞成数的函数
function getfavourNum(){
    favourNum.innerHTML = document.getElementById('digg_count').innerHTML;    
}
//页面载入时获取赞成数
getfavourNum();
//点击菜单中的赞成项后，再获取最新的赞成数
menuFavour.addEventListener('click',function(){
    setTimeout(function(){
        getfavourNum();
    },2000); 
})
</script>

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

　　由图中可知，评论区为<div id="comment_form_container">

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

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

<div id="test">评论</div>
<script>
window.onload = function(){
    test.onclick = function(){
        document.getElementById('comment_form_container').scrollIntoView();
    }
}
</script>

完整源码

　　将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 = '<li id="menuTop">回到顶部</li>\
    <li id="menuFavour">点赞(<span id="favourNum">0</span>赞)</li>\
    <li id="menuCommand">评论</li>';
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 < list.offsetHeight){
            list.style.top = e.clientY - list.offsetHeight + 'px';
        }
        //当鼠标的位置到视口右侧的位置小于菜单的宽度，则视口的右侧为菜单的右侧
        if(document.documentElement.clientWidth - e.clientX < list.offsetWidth){
            list.style.left = document.documentElement.clientWidth - list.offsetHeight + 'px';
        }
        list.style.display = 'block';
        //点击右键的同时按下ctrl键，那么将显示默认右键菜单
        if(e.ctrlKey){
            list.style.display = 'none';
        //如果只是点击右键，则显示自定义菜单
        }else{
            return false;
        }        
    }    

    /*********回到顶部功能*********/
    var timer  = null;    
    menuTop.onclick = function(){
        cancelAnimationFrame(timer);
        //获取当前毫秒数
        var startTime = +new Date(); 
        //获取当前页面的滚动高度
        var b = document.body.scrollTop || document.documentElement.scrollTop;
        var d = 500;
        var c = b; 
        timer = requestAnimationFrame(function func(){
            var t = d - Math.max(0,startTime - (+new Date()) + d);
        document.documentElement.scrollTop = document.body.scrollTop = t * (-c) / d + b;
        timer = requestAnimationFrame(func);
        if(t == d){
          cancelAnimationFrame(timer);
        } 
        });
    };

    /*********点赞功能**********/
    //模拟原始点赞按钮的点击事件
    var digg = document.getElementById('div_digg');
    if(digg){
        menuFavour.onclick = digg.children[0].onclick;            
    }
    //获取赞成数的函数
    function getfavourNum(){
        if(digg){
            favourNum.innerHTML = digg.children[0].children[0].innerHTML;
        }            
    }
    //页面载入时获取赞成数
    getfavourNum();
    if(menuFavour.addEventListener){
        menuFavour.addEventListener('click',function(){
            setTimeout(function(){
                getfavourNum();
            },2000);
        })    
    }else{
        menuFavour.attachEvent('onclick',function(){
            setTimeout(function(){
                getfavourNum();
            },2000);
        })        
    }

    /*********评论功能*********/
    menuCommand.onclick = function(){
        document.getElementById('comment_form_container').scrollIntoView();
    }
}

　　当然，也可以直接引入js文件，文件在线地址为https://files.cnblogs.com/files/xiaohuochai/contextMenu.js

最后

　　如何演示？点击右键出现自定义菜单。按住ctrl键同时，点击右键，出现的是系统默认菜单

　　但是，在IE浏览器中，会提示无法获取博客园文档自动生成的<div class="diggit">元素，具体原因和解决办法还不清楚

　　欢迎交流

posted @ 2016-09-13 19:24 小火柴的蓝色理想阅读(5670) 评论(26) 编辑收藏举报

刷新页面返回顶部

小火柴的蓝色理想