分类 HTML5 下的文章

更新记录

03/17 00:12：解决滚动页面后右击菜单栏出现在顶部。解决办法将 e.clientY 换成 e.pageY

在线预览：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://doc.nowtime.cc/mdui/menu.html
            var inst = new mdui.Menu($div, '#menu');
            inst.open();//打开菜单栏
            $div.remove();//销毁创建的临时DOM
        }
    });

完整 HTML代码

- 阅读剩余部分 -

  1. 1
  2. 2