[技術博客]前端右鍵菜單的實現

[技術博客]前端右鍵菜單的實現

在TexrMarking項目開發過程中，需要實現右鍵菜單對實體進行刪除、修改功能。

在此我記錄下關於右鍵菜單的實現。

HTML contextmenu 屬性

首先我們來介紹Firefox瀏覽器特有的contextmenu屬性。

<div contextmenu="mymenu">

<menu type="context" id="mymenu">
  <menuitem label="Refresh"></menuitem>
  <menuitem label="Twitter"></menuitem>
</menu>

</div>

contextmenu 屬性規定了元素的上下文菜單。當用戶右擊元素時將顯示上下文菜單。

contextmenu 屬性的值是需要打開的

元素的 id。

但是在具體實現過程中，contextmenu屬性並不能很好地適應我們項目的要求。同時，contextmenu屬性只適應firefox瀏覽器，在兼容性上也有很大的問題。總的來說contextmenu不能解決我們的問題。

使用JS制作右鍵菜單

首先是html的結構：

<dir id = "rightmenu" class="rightmenu">
	<ul>
		<li disabled="disabled"><a href="#">返回(B)</a><span>Alt+向左箭頭</span></li>
		<li><a href="#">前進(F)</a><span>Alt+向右箭頭</span></li>
		<li><a href="#">重新加載(R)</a><span>Ctrl+R</span></li>
	</ul>
	<ul>
		<li><a href="#">另存為(A)...</a><span>Ctrl+5</span></li>
		<li><a href="#">打印(P)...</a><span>Ctrl+P</span></li>
		<li><a href="#">投射(C)...</a><span>Ctrl+R</span></li>
	</ul>
	<ul>
		<li><a href="#">查看代碼(V)</a><span>Ctrl+U</span></li>
		<li><a href="#">檢查代碼(N)</a><span>Ctrl+Shift+L</span></li>
	</ul>
</dir>

這里按照谷歌瀏覽器默認的右鍵菜單來進行布局

在寫CSS文件時需要注意，.rightmenu設置display：none是因為右鍵菜單本身是隱藏了因為點擊了才出現，倘若不加這句，菜單會出現在頁面的左上角

JS實現

<script >
	document.addEventListener('DOMContentLoaded',function(){
		var rightmenu = document.getElementById('rightmenu');

		document.oncontextmenu = function(event){
			event.preventDefault();

			rightmenu.style.display = "none";
			rightmenu.style.display = "block";
			rightmenu.style.left = event.offsetX+'px';
			rightmenu.style.top = event.offsetY+'px';
		}

		document.onclick=function(event){
			rightmenu.style.display="none"
		}
	})
</script>

首先將瀏覽器的右鍵默認行為關閉。接下來設置右鍵行為，左箭可以取消掉右鍵菜單。

這樣的功能並不完善，需要給每一個li寫一個BOM事件，這里進行了省略。

這樣實現起來還是比較麻煩的。因為我們在Graph中使用了EChart，所以我接着去查看EChart的菜單實現方法。

EChart添加右鍵點擊菜單

新增'CONTEXTMENU'事件：

var ZR_EVENT_LISTENS = [
        'CLICK',
        'DBLCLICK',
        'CONTEXTMENU',
        'MOUSEOVER',
        'MOUSEOUT',
        'DRAGSTART',
        'DRAGEND',
        'DRAGENTER',
        'DRAGOVER',
        'DRAGLEAVE',
        'DROP'
    ];

_oncontextmenu: function (param) {
    //if(arguments[0].event.button == '2'){
    //    callChartListMethodReverse(this, 'onmousedown', param);
        if (param.target) {
            var ecData = this._eventPackage(param.target);
            if (ecData && ecData.seriesIndex != null) {
                this._messageCenter.dispatch(ecConfig.EVENT.CONTEXTMENU, param.event, ecData, this);
            }
        }
    //}
},

現在對界面文件進行一些說明，下面模擬了某些血緣分析的靜態數據（項目是從后台查出的，這里就只能隨便模擬一些數據看效果了），准備一個div，用來定義右鍵菜單：

<div id="menuuu"  onMouseLeave ="this.style.display = 'none';">
        <ul><!--右鍵彈出菜單-->        
            <li id="menu_blood" onClick="alert('血緣分析');" onMouseOver="this.style.background = '#999999';" onMouseOut="this.style.background = '#CCCCCC';">
                <img src="menu_blood.png" /><font>血緣分析</font>
            </li>
            <li id="menu_influence" onClick="alert('影響分析');" onMouseOver="this.style.background = '#999999';" onMouseOut="this.style.background = '#CCCCCC';">
                <img src="menu_influence.png" /><font>影響分析</font>
            </li>
        </ul>
    </div>

聲明使用到右鍵菜單事件：

function rightBt(param){
    var menu = document.getElementById("menuuu");
    var event = param.event;
    var pageX = event.pageX;
    var pageY = event.pageY;
    menu.style.left = pageX + 'px';
    menu.style.top = pageY + 'px';
    menu.style.display = "block";
}
                            
//myChart.on(ecConfig.EVENT.CLICK, focus);
//myChart.on(ecConfig.EVENT.MOUSEDOWN, rightBt);
myChart.on(ecConfig.EVENT.CONTEXTMENU, rightBt);

以上就是demo的源碼，效果如下：

基本符合項目的要求

參考資料

https://www.runoob.com/tags/att-global-contextmenu.html

https://www.cnblogs.com/ilinuxer/p/5281525.html

https://www.jianshu.com/p/2f6c9266d14c