在博客園博文中添加自定義右鍵菜單的方法詳解
頁(yè)面設(shè)計(jì)
首先將這三個(gè)功能以一個(gè)列表<ul>的形式放置。鼠標(biāo)移入時(shí)樣式改變，移出時(shí)還原
<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">點(diǎn)贊</li>
<li class="in">評(píng)論</li>
</ul>
菜單邏輯
菜單邏輯共包括阻止默認(rèn)行為、顯隱效果和位置判斷三個(gè)部分
默認(rèn)行為
通常，點(diǎn)擊右鍵時(shí)，會(huì)彈出瀏覽器的默認(rèn)右側(cè)菜單
通過(guò)return false可以實(shí)現(xiàn)阻止默認(rèn)行為的效果，當(dāng)然也可以使用preventDefault()和returnValue，詳細(xì)信息移步至此
document.oncontextmenu = function(){
return false;
}
顯隱
右鍵菜單默認(rèn)隱藏，點(diǎn)擊右鍵時(shí)顯示，點(diǎn)擊左鍵時(shí)再隱藏
關(guān)于元素顯隱，個(gè)人總結(jié)過(guò)共9種思路，本文就用最簡(jiǎn)單的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>
位置判斷
鼠標(biāo)對(duì)象共有6對(duì)坐標(biāo)位置信息，若把右鍵菜單設(shè)置為fixed固定定位，則選擇clientX/Y即可
一般地，右鍵菜單的左上角位置應(yīng)該是當(dāng)前鼠標(biāo)的坐標(biāo)處
但是，還有另外2種情況需要考慮
【1】如果鼠標(biāo)的位置到視口底部的位置小于菜單的高度，則鼠標(biāo)的位置為菜單的底部位置
【2】如果鼠標(biāo)的位置到視口右側(cè)的位置小于菜單的寬度，則視口的右側(cè)為菜單的右側(cè)
元素的尺寸信息共有偏移尺寸offset、可視區(qū)尺寸client和滾動(dòng)尺寸scroll，此時(shí)菜單的寬高應(yīng)該為偏移尺寸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';
//注意，由于加法、減法的優(yōu)先級(jí)高于大于、小于的優(yōu)先級(jí)，所以不用加括號(hào)，詳細(xì)情況移步至此
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>
功能實(shí)現(xiàn)
共用有回到頂部、點(diǎn)贊和評(píng)論三個(gè)功能需要實(shí)現(xiàn)
回到頂部
回到頂部共有5種實(shí)現(xiàn)方法，下面使用可讀寫(xiě)的scrollTop屬性進(jìn)行效果實(shí)現(xiàn)
<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>
但是，上面的代碼有一個(gè)問(wèn)題，就是當(dāng)頁(yè)面內(nèi)容較多時(shí)，回到頂部的動(dòng)畫(huà)效果將持續(xù)很長(zhǎng)時(shí)間。因此，使用時(shí)間版的運(yùn)動(dòng)更為合適，假設(shè)回到頂部的動(dòng)畫(huà)效果共運(yùn)動(dòng)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);
//獲取當(dāng)前毫秒數(shù)
var startTime = +new Date();
//獲取當(dāng)前頁(yè)面的滾動(dòng)高度
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>
點(diǎn)贊
點(diǎn)贊函數(shù)是博客園自己寫(xiě)的，我們看不到內(nèi)部函數(shù)也無(wú)法使用。如果想在右鍵菜單中使用點(diǎn)贊功能，就需要模擬點(diǎn)擊事件。點(diǎn)擊右鍵菜單中的點(diǎn)贊項(xiàng)時(shí)，觸發(fā)博客園的自帶的點(diǎn)贊項(xiàng)的click事件
由下圖可知，點(diǎn)贊函數(shù)加在<div class="diggit">上
由一個(gè)小例子來(lái)說(shuō)明模擬點(diǎn)擊事件如何實(shí)現(xiàn)
點(diǎn)擊按鈕1時(shí)，顯示1；點(diǎn)擊按鈕2時(shí)，也要實(shí)現(xiàn)同樣的功能
<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">點(diǎn)贊</div>
<script>
window.onload = function(){
test.onclick = document.getElementById('div_digg').children[0].onclick;
}
</script>
增加獲取最新點(diǎn)贊數(shù)的功能
當(dāng)id為'menuFavour'的div元素被點(diǎn)擊時(shí)，更新點(diǎn)贊數(shù)。但，由于從服務(wù)器獲取最新數(shù)據(jù)以及相關(guān)元素的內(nèi)容發(fā)生變化，都需要時(shí)間，所以增加2秒的延遲
<div id="menuFavour">點(diǎn)贊(<span id="favourNum">0</span>贊)</div>
<script>
//模擬原始點(diǎn)贊按鈕的點(diǎn)擊事件
menuFavour.onclick = document.getElementById('div_digg').children[0].onclick;
//獲取贊成數(shù)的函數(shù)
function getfavourNum(){
favourNum.innerHTML = document.getElementById('digg_count').innerHTML;
}
//頁(yè)面載入時(shí)獲取贊成數(shù)
getfavourNum();
//點(diǎn)擊菜單中的贊成項(xiàng)后，再獲取最新的贊成數(shù)
menuFavour.addEventListener('click',function(){
setTimeout(function(){
getfavourNum();
},2000);
})
</script>
評(píng)論
點(diǎn)擊右鍵菜單中的評(píng)論項(xiàng)時(shí)，頁(yè)面定位到評(píng)論區(qū)的位置
由圖中可知，評(píng)論區(qū)為<div id="comment_form_container">
將元素置于可視區(qū)域內(nèi)有很多方法，如scrollTo()、scrollBy()、通過(guò)scrollTop計(jì)算、scrollIntoView()方法等等，詳細(xì)情況移步至此
下面利用scrollIntoView()方法滾動(dòng)當(dāng)前元素，進(jìn)入瀏覽器的可見(jiàn)區(qū)域
<div id="test">評(píng)論</div>
<script>
window.onload = function(){
test.onclick = function(){
document.getElementById('comment_form_container').scrollIntoView();
}
}
</script>
完整源碼
將HTML結(jié)構(gòu)和CSS樣式寫(xiě)成javascript生成的行為，最終形成一份js文件，代碼如下
//requestAnimationFrame兼容寫(xiě)法
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);
};
}
//事件處理程序兼容寫(xiě)法
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">點(diǎn)贊(<span id="favourNum">0</span>贊)</li>\
<li id="menuCommand">評(píng)論</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結(jié)構(gòu)穩(wěn)定后，再操作
addEvent(window,'load', contextMenuLoad);
function contextMenuLoad(){
/********顯示和隱藏菜單***********/
addEvent(document,'click',function(){
list.style.display = 'none';
})
//右鍵點(diǎn)擊時(shí)，菜單顯示
document.oncontextmenu = function(e){
e = e || event;
//通常情況下，菜單的位置就是鼠標(biāo)的位置
list.style.left = e.clientX + 'px';
list.style.top = e.clientY + 'px';
//當(dāng)鼠標(biāo)的位置到視口底部的位置小于菜單的高度，則鼠標(biāo)的位置為菜單的底部位置
if(document.documentElement.clientHeight - e.clientY < list.offsetHeight){
list.style.top = e.clientY - list.offsetHeight + 'px';
}
//當(dāng)鼠標(biāo)的位置到視口右側(cè)的位置小于菜單的寬度，則視口的右側(cè)為菜單的右側(cè)
if(document.documentElement.clientWidth - e.clientX < list.offsetWidth){
list.style.left = document.documentElement.clientWidth - list.offsetHeight + 'px';
}
list.style.display = 'block';
//點(diǎn)擊右鍵的同時(shí)按下ctrl鍵，那么將顯示默認(rèn)右鍵菜單
if(e.ctrlKey){
list.style.display = 'none';
//如果只是點(diǎn)擊右鍵，則顯示自定義菜單
}else{
return false;
}
}
/*********回到頂部功能*********/
var timer = null;
menuTop.onclick = function(){
cancelAnimationFrame(timer);
//獲取當(dāng)前毫秒數(shù)
var startTime = +new Date();
//獲取當(dāng)前頁(yè)面的滾動(dòng)高度
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);
}
});
};
/*********點(diǎn)贊功能**********/
//模擬原始點(diǎn)贊按鈕的點(diǎn)擊事件
var digg = document.getElementById('div_digg');
if(digg){
menuFavour.onclick = digg.children[0].onclick;
}
//獲取贊成數(shù)的函數(shù)
function getfavourNum(){
if(digg){
favourNum.innerHTML = digg.children[0].children[0].innerHTML;
}
}
//頁(yè)面載入時(shí)獲取贊成數(shù)
getfavourNum();
if(menuFavour.addEventListener){
menuFavour.addEventListener('click',function(){
setTimeout(function(){
getfavourNum();
},2000);
})
}else{
menuFavour.attachEvent('onclick',function(){
setTimeout(function(){
getfavourNum();
},2000);
})
}
/*********評(píng)論功能*********/
menuCommand.onclick = function(){
document.getElementById('comment_form_container').scrollIntoView();
}
}
更多關(guān)于在博客園中添加代碼的文章請(qǐng)點(diǎn)擊下面的相關(guān)鏈接
相關(guān)文章
詳解Three.js?場(chǎng)景中如何徹底刪除模型和性能優(yōu)化
這篇文章主要為大家介紹了詳解Three.js?場(chǎng)景中如何徹底刪除模型和性能優(yōu)化，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2023-04-04
這篇文章主要為大家介紹了前端可視化搭建組件值校驗(yàn)規(guī)則詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2023-05-05
Servlet3.0與純javascript通過(guò)Ajax交互的實(shí)例詳解
Servlet與純javascript通過(guò)Ajax交互,對(duì)于很多人來(lái)說(shuō)應(yīng)該很簡(jiǎn)單。不過(guò)還是寫(xiě)寫(xiě)，方便Ajax學(xué)習(xí)的后來(lái)者2018-03-03
詳解微信小程序入門(mén)五: wxml文件引用、模版、生命周期
本篇文章主要介紹了詳解微信小程序入門(mén)五: wxml文件引用、模版、生命周期，具有一定的參考價(jià)值，有興趣的可以了解一下。2017-01-01
pnpm?tauri?build?默認(rèn)com.tauri.dev打包報(bào)錯(cuò)解決
這篇文章主要介紹了pnpm?tauri?build?默認(rèn)com.tauri.dev打包報(bào)錯(cuò)解決方式，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2023-08-08
微信小程序 登錄的簡(jiǎn)單實(shí)現(xiàn)
這篇文章主要介紹了微信小程序 登錄的簡(jiǎn)單實(shí)現(xiàn)的相關(guān)資料,需要的朋友可以參考下2017-04-04
這篇文章主要介紹了微信小程序 devtool隱藏的秘密的相關(guān)資料,需要的朋友可以參考下2017-01-01
這篇文章主要為大家介紹了ESLint規(guī)范TypeScript代碼使用方法，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-11-11
JavaScript架構(gòu)搭建前端監(jiān)控如何采集異常數(shù)據(jù)
這篇文章主要為大家介紹了JavaScript架構(gòu)搭建前端監(jiān)控如何采集異常數(shù)據(jù)，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-06-06
微信小程序本地緩存數(shù)據(jù)增刪改查實(shí)例詳解
這篇文章主要介紹了微信小程序本地緩存數(shù)據(jù)增刪改查實(shí)例詳解的相關(guān)資料,需要的朋友可以參考下2017-05-05