zoukankan      html  css  js  c++  java
  • 自定义右键菜单显示

    <--html 代码-->

    <div class="search_platforms" ref="search_platform">
        XXX
        XXX
    
    </div>
    
    <ul class="platform_Menu" ref="platform_Menu" v-show="platform_Menu_show">
          <li @click="copy_platform">复制</li>
    </ul>

    //js代码

                var container_OffsetTop=function( elem ){
                    let top = elem.offsetTop;
                    let parent = elem.offsetParent;
                    while(parent){
                        top += parent.offsetTop;
                        parent = parent.offsetParent;
                    }
                    return top;
                };
                var container_OffsetLeft=function( elem ){
                    let left = elem.offsetLeft;
                    let parent = elem.offsetParent;
                    while( parent){
                        left += parent.offsetLeft;
                        parent = parent.offsetParent;
                    }
                    return left;
                };
    
                // 平台输入框里右键点击事件
                var _this = this;
                var pcontainer = this.$refs.search_platform;
                pcontainer.oncontextmenu = function(e){
                    
                    _this.platform_Menu_show = true;
                    var container_Top = container_OffsetTop(pcontainer);
                    var container_Left = container_OffsetLeft(pcontainer);
    
                    var mouseX = e.pageX;
                    var mouseY = e.pageY;
    
                    e.preventDefault();
                    // console.log(123)
                    console.log(_this.$refs)
                    // _this.$refs.platform_Menu.style.top = event.pageY + "px";
                    // _this.$refs.platform_Menu.style.left = event.pageX + "px";
                    _this.$refs.platform_Menu.style.top =  mouseY - container_Top + "px";
                    _this.$refs.platform_Menu.style.left = mouseX  - container_Left + "px";
    
                    console.log(e.pageX,e.pageY)
    
                }
                // 浏览器页面 Menu click消失
                document.addEventListener("click", (event) => {
                    _this.platform_Menu_show = false;
                });
  • 相关阅读:
    P1270 【“访问”美术馆】
    SP14932 【LCA
    NOI 题库 9272 题解
    Code[VS] 1230 题解
    20161022 NOIP模拟赛 T1 解题报告
    20161023 NOIP 模拟赛 T2 解题报告
    20161023 NOIP 模拟赛 T1 解题报告
    20161022 NOIP模拟赛 解题报告
    POJ 1979 题解
    POJ 1160 题解
  • 原文地址:https://www.cnblogs.com/hill-foryou/p/9896094.html
Copyright © 2011-2022 走看看