MDUI 实现右击菜单弹出菜单栏

有别人的路,让别人无路可有

原文链接:https://nowtime.cc/html5/897.html

在线预览:https://nowtime.cc/mdui/contextmenu.html


实现代码(JavaScript 部分):

var $$ = mdui.JQ;
//监听鼠标右击事件 / 移动端长按事件
$$(document).on('contextmenu', function (e) {
    // console.log(e);

    //0:移动端长按(iOS 测试未通过)
    //2:电脑端右键
    if(e.button === 2 || e.button === 0) {
        e.preventDefault();//阻止冒泡,阻止默认的浏览器菜单

        //(修改了这里)鼠标点击位置,相对于页面
        var _x = e.pageX,
            _y = e.pageY;

        let $div = $$("<div></div>").css({
            position: 'absolute',
            top: _y+'px',
            left: _x+'px',
        });
        $$('body').append($div);//创建临时DOM

        // anchorSelector 表示触发菜单的元素的 CSS 选择器或 DOM 元素
        // menuSelector 表示菜单的 CSS 选择器或 DOM 元素
        // options 表示组件的配置参数,见下面的参数列表
        // 完整文档列表:https://mdui.org/docs/menu.html
        var inst = new mdui.Menu($div, '#menu');
        inst.open();//打开菜单栏
        $div.remove();//销毁创建的临时DOM
    }
});


HTML 部分:

<ul class="mdui-menu" id="menu">
    <li class="mdui-menu-item">
        <a href="javascript:;" class="mdui-ripple">Refresh</a>
    </li>
    <li class="mdui-menu-item">
        <a href="javascript:;" class="mdui-ripple">Settings</a>
    </li>
    <li class="mdui-menu-item">
        <a href="javascript:;" class="mdui-ripple">Send feedback</a>
    </li>
    <li class="mdui-menu-item">
        <a href="javascript:;" class="mdui-ripple">Help</a>
    </li>
    <li class="mdui-menu-item">
        <a href="javascript:;" class="mdui-ripple">Signout</a>
    </li>
</ul>


共 6 个回答
细节决定成败

太棒了!

有别人的路,让别人无路可有

@xcg340122 我这测试好像没发现你的问题(Chrome 切换“手机视图”,鼠标右击是会出现在左上角,但这可能并不是 BUG,因为遇到移动端触发菜单是长按时才会触发,未考虑到鼠标右击清空

其实是有BUG的,当快速右击或者左击获取的x或y会变成0,这时候菜单是在左上角出现的,解决办法是做一个额外的获取判断

var scrollX = document.documentElement.scrollLeft || document.body.scrollLeft;
var scrollY = document.documentElement.scrollTop || document.body.scrollTop;
//(修改了这里)鼠标点击位置,相对于页面
var _x = e.pageX || e.clientX + scrollX,
var _y = e.pageY || e.clientY + scrollY;
if(_x == 0 || _y == 0){
    return;
}
		    
举头望涵涵,低头思第一。 https://www.dffzmxj.com

在“发布”按钮右边找到“代码块”按钮(悬浮在按钮上时,会有提示),点击即可。

B I | T <> !三 !三 | 🔗 🖼
         ^---This one!!!
海内存知己 天涯若比邻

这种代码块怎么弄

举头望涵涵,低头思第一。 https://www.dffzmxj.com

原理看着不难。