右击阻止默认事件和右击显示菜单

最新推荐文章于 2024-05-27 08:28:52 发布

小猿序中猿

最新推荐文章于 2024-05-27 08:28:52 发布

阅读量2k

点赞数 1

分类专栏：原生js实现右击显示菜单文章标签： javascript 前端 html

本文链接：https://blog.csdn.net/qq_54357054/article/details/125004227

版权

原生js实现右击显示菜单专栏收录该内容

1 篇文章 0 订阅

订阅专栏

阻止右击默认事件方式：

1. 阻止页面上的默认事件：（在页面上的右击事件都将被禁止）

document.oncontextmenu = function () {
    // e.preventDefault()
    // 或者  都可以
    return false;
}

2. 阻止元素上的默认右击事件：

<div id="app">
    <div class="box"></div>
    <div class="menu">
      <!-- 内容 -->
    </div>
  </div>

  <script>
    const box = document.getElementsByClassName('box')[0]
    box.oncontextmenu = function (e) {
      e.preventDefault();
    }
    box.onmousedown = function (e) {
      // 1 表示鼠标左键
      // 2 表示鼠标右键
      console.log(e.button);
    }
  </script>

可以看出阻止了元素上的默认右击事件；页面上的菜单还是可以显示

小案例：

如下图所示：

盒子在父容器内可拖动，可以右击显示菜单：

传入三个参数：el：表示目标元素；可拖动的元素

parentNode: 表示父级容器

menu：表示显示的菜单；

代码：

index.html:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    html , body{
      margin: 0;
      padding: 0;
    }
    #app {
      position: relative;
      margin: 100px auto;
      padding: 10px;
      width: 400px;
      height: 400px;
      border: 1px solid #333;
    }
    .box {
      position: absolute;
      top: 0;
      left: 0;
      width: 100px;
      height: 100px;
      background-color: pink;
    }
    .menu {
      display: none;
      position: absolute;
      top: 0;
      left: 0;
      width: 100px;
      height: 100px;
      background-color: skyblue;
    }
  </style>
</head>
<body>
  <div id="app">
    <div class="box"></div>
    <div class="menu">
      <!-- 内容 -->
    </div>
  </div>
  <script src="./index.js"></script> -->
  <script>
    const box = document.querySelector('.box'),
          app = document.querySelector('#app'),
          menu = document.querySelector('.menu');
          
    const drag = new Drag({
      el: box,
      parentNode: app,
      menu,
    })
    drag.init();
  </script>
</body>
</html>

index.js:

function Drag ({el, parentNode, menu}) {
  if(!el) throw new Error('no element!');
  this.el = el;
  this.parentNode = parentNode;
  this.menu = menu;
}

Drag.prototype = {
  init () {
    this.bindEvent();
  },
  bindEvent () {
    this.el.addEventListener('mousedown', this.onMouseDown.bind(this), false)
    document.addEventListener('click', () => this.menu.style.display = 'none')
  },
  // 鼠标按下
  onMouseDown (e) {
    this.startX = e.clientX;
    this.startY = e.clientY;
    // 盒子的宽高
    this.elWidth = this.el.offsetWidth;
    this.elHeight = this.el.offsetHeight;

    this.pLeft = this.parentNode.offsetLeft;
    this.pTop = this.parentNode.offsetTop;
    this.pWdith = this.parentNode.offsetWidth;
    this.pHeight = this.parentNode.offsetHeight;

    if(e.button === 0) {
      // 鼠标左键点击
      this.setInitPos();
      const move = (e) => {
        this.onMouseMove(e);
      };
      // 触发移动事件
      document.addEventListener('mousemove', move, false);
      // 鼠标弹起
      document.addEventListener('mouseup', this.onMouseUp.bind(this, move), false);
    } else if (e.button === 2) {

      // 清除该元素上右击默认事件
      // this.preventContextMenu();
      document.oncontextmenu = function (e) {
        return false
      }

      this.menu.style.display = 'block'
      this.setMenuPos();
    }
    

  },

  onMouseMove (e) {
    this.moveX = e.clientX;
    this.moveY = e.clientY;

    this.setMovePos();
    // console.log(this.moveX, this.moveY);
  },

  // 鼠标弹起
  onMouseUp (fn) {
    document.removeEventListener('mousemove', fn);
  },

  // 初始化点击设置位置
  setInitPos () {
    
    const { el, startX, startY, pLeft, pTop, elWidth, elHeight } = this;

    el.style.left = startX - pLeft - elWidth / 2 + 'px';

    el.style.top = startY - pTop - (elHeight / 2) + 'px';
  },
  // 移动位置设置
  setMovePos () {
     const { el, moveX, moveY, pLeft, pTop, elWidth, elHeight,pWdith, pHeight } = this;

    const elLeft = moveX - elWidth / 2,
          elRight = moveX + elWidth / 2,
         elTop = moveY - elHeight / 2,
         elBtm = moveY + elHeight / 2;

    if(elLeft <= pLeft) {
      el.style.left = 0 + 'px';
    } else if (elRight > pLeft + pWdith) {
      el.style.left = pWdith - elWidth + 'px'
    } else {
      el.style.left = moveX - pLeft - elWidth / 2 + 'px'
    }

    if(elTop <= pTop) {
      el.style.top = 0;
    } else if(elBtm > pHeight + pTop){
      el.style.top = pHeight - elHeight + 'px';
    } else {
     el.style.top = moveY - pTop - elHeight / 2 + 'px';
    }
  },

  // 设置菜单位置
  setMenuPos () {
    const { menu, startX, startY, pLeft, pTop, elWidth, elHeight } = this;

    menu.style.left = startX - pLeft  + 'px';

    menu.style.top = startY - pTop  + 'px';
  },
}

小猿序中猿

关注

1
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
右击阻止默认事件和右击显示菜单

阻止右击默认事件方式:1. 阻止页面上的默认事件：（在页面上的右击事件都将被禁止）document.oncontextmenu = function () { // e.preventDefault() // 或者都可以 return false;}2. 阻止元素上的默认右击事件：<div id="app"> <div class="box"></div> <div class="..
复制链接

扫一扫