美高梅4858-美高梅4858mgm-[官方网站]

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

更新记录

03/17 00:12:解决滚动页面后右击菜单栏出美高梅4858mgm顶部。解决办法将 e.clientY 换成 e.pageY

在线预览:/mdui/contextmenu.html

核心 美高梅4858mgm 代码:

    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代码

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>MDUI 鼠标右击弹出菜单</title>
    <link rel="stylesheet" href="https://cdnjs.loli.net/ajax/libs/mdui/0.4.3/css/mdui.min.css">
    <script src="https://cdnjs.loli.net/ajax/libs/mdui/0.4.3/js/mdui.min.js"></script>
</head>
<body>

<h1>鼠标右击任何地方,或者移动端长按(不一定有用),看看效果</h1>
<h2>原文链接:<a href="/html5/897.html" target="_blank">/html5/897.html</a></h2>

<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>


<script>
    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
        }
    });
</script>

<footer>
    <span>Copyright ? 2017 ~ 2020 <a href="/" title="美高梅4858mgm工具网-NowTool.cn">美高梅4858官方网站</a>. All Rights Reserved.</span>
</footer>
</body>
</html>

如无特别声明,该文章均为 美高梅4858官方网站NowTime.cc)原创,转载请遵循 署名-非商业性使用 4.0 国际(CC BY-NC 4.0) 协议,即转载请注明文章来源。


标签: 美高梅4858mgm, MDUI

赞 (2)

添加新评论

XML 地图 | Sitemap 地图