JavaScript自定义鼠标右键菜单栏

下面我将为大家讲解 JavaScript 自定义鼠标右键菜单栏的完整攻略。

实现思路

实现 JavaScript 自定义鼠标右键菜单栏的基本思路如下:

  1. 监听右键菜单事件,捕获鼠标点击坐标;
  2. 动态创建 <div> 元素,设置其样式、定位,同时设置 display:none 隐藏起来;
  3. 将该 <div> 元素添加到 <body> 元素中;
  4. 再次监听右键菜单事件,根据鼠标点击的坐标,在 <div> 元素中生成菜单项;
  5. 监听菜单项的点击事件,执行相应的操作。

代码实现

下面是 JavaScript 自定义鼠标右键菜单栏的一段简单实现示例:

let menuDiv = document.createElement('div');
menuDiv.innerHTML = '<ul><li>菜单项1</li><li>菜单项2</li><li>菜单项3</li></ul>';
menuDiv.style.display = 'none';
menuDiv.style.position = 'absolute';
menuDiv.style.backgroundColor = '#fff';
menuDiv.style.width = '100px';
menuDiv.style.border = '1px solid #ccc';

document.body.appendChild(menuDiv);

// 右键菜单事件
document.addEventListener('contextmenu', function (e) {
  e.preventDefault();
  menuDiv.style.display = 'block';
  menuDiv.style.left = e.clientX + 'px';
  menuDiv.style.top = e.clientY + 'px';
});

// 菜单项点击事件
menuDiv.addEventListener('click', function (e) {
  if (e.target.nodeName.toLocaleLowerCase() === 'li') {
    console.log(e.target.innerHTML);
  }
  menuDiv.style.display = 'none';
});

在这段代码中,首先创建一个 <div> 元素,用于存放右键菜单栏的内容。在右键菜单事件中,指定该 <div> 的位置,并显示出来。在菜单项点击事件中,判断点击的是哪个菜单项,并执行相应的操作,同时隐藏该菜单栏。

示例说明

下面给出一个带有子菜单的完整示例:

let contextMenu = {
  '菜单项1': function () { console.log('菜单项1') },
  '菜单项2': function () { console.log('菜单项2') },
  '菜单项3': {
    '菜单项3-1': function () { console.log('菜单项3-1') },
    '菜单项3-2': function () { console.log('菜单项3-2') },
    '菜单项3-3': {
      '菜单项3-3-1': function () { console.log('菜单项3-3-1') },
      '菜单项3-3-2': function () { console.log('菜单项3-3-2') }
    }
  }
};

function createContextMenu(data) {
  let menuDiv = document.createElement('div');
  let menuHtml = '';
  for (let key in data) {
    if (typeof data[key] === 'function') {
      menuHtml += '<li>' + key + '</li>'
    } else if (typeof data[key] === 'object') {
      menuHtml += '<li>' + key + createContextMenu(data[key]) + '</li>'
    }
  }
  menuDiv.innerHTML = '<ul>' + menuHtml + '</ul>';
  menuDiv.style.display = 'none';
  menuDiv.style.position = 'absolute';
  menuDiv.style.backgroundColor = '#fff';
  menuDiv.style.width = '150px';
  menuDiv.style.border = '1px solid #ccc';
  return menuDiv.outerHTML;
}

document.body.innerHTML += createContextMenu(contextMenu);

let menuDiv = document.querySelector('#menu');

// 右键菜单事件
document.addEventListener('contextmenu', function (e) {
  e.preventDefault();
  if (e.target.nodeName.toLocaleLowerCase() === 'li') {
    return;
  }
  menuDiv.style.display = 'block';
  menuDiv.innerHTML = createContextMenu(contextMenu);
  menuDiv.style.left = e.clientX + 'px';
  menuDiv.style.top = e.clientY + 'px';
});

// 菜单项点击事件
menuDiv.addEventListener('click', function (e) {
  if (e.target.nodeName.toLocaleLowerCase() === 'li') {
    let key = e.target.innerText;
    if (typeof contextMenu[key] === 'function') {
      contextMenu[key]();
      menuDiv.style.display = 'none';
    } else if (typeof contextMenu[key] === 'object') {
      menuDiv.innerHTML = createContextMenu(contextMenu[key]);
    }
  }
});

这个示例中,定义了一个 contextMenu 对象,用于描述右键菜单栏的内容,包括三个菜单项,其中第三个菜单项还包含两个子菜单。使用 createContextMenu() 函数动态生成菜单栏的 HTML 代码,然后将其插入到 <body> 元素中。右键菜单事件触发后,根据鼠标点击的位置动态调整菜单栏的内容和位置。菜单项点击事件触发后,根据点击的菜单项执行相应的操作或显示子菜单。

本站文章如无特殊说明,均为本站原创,如若转载,请注明出处:JavaScript自定义鼠标右键菜单栏 - Python技术站

(0)
上一篇 2023年6月10日
下一篇 2023年6月10日

相关文章

  • CSS font-family为英文和中文字体分别设置不同的字体

    为英文和中文字体分别设置不同的字体,可以通过CSS font-family属性来实现。下面是详细的攻略: 1. 确定字体 首先,需要确定要使用的英文字体和中文字体。可以通过在网上搜索字体库,或者使用一些常见的字体,例如: 英文字体:Arial、Helvetica、Times New Roman、Georgia等 中文字体:宋体、黑体、微软雅黑、华文细黑等 2…

    css 2023年6月9日
    00
  • JQuery之拖拽插件实现代码

    JQuery是一种广泛使用的JavaScript库,可以简化对HTML文档的操作和创建动态Web页面等任务。JQuery UI是JQuery的官方用户界面库,为开发人员提供可重用的UI组件和交互性行为。 拖拽技术是Web开发中实现复杂交互的重要组成部分之一。JQuery UI提供了一个易于使用和定制的拖拽插件,并支持许多特性,例如限制在容器内部移动,对齐网格…

    css 2023年6月11日
    00
  • 纯CSS无hacks的跨游览器自适应高度多列布局 推荐

    以下是详细的“纯CSS无hacks的跨游览器自适应高度多列布局”的攻略: 概览 在前端开发中,我们常常需要实现类似Pinterest等网站的多列布局,这时候自适应高度就显得尤为重要。 本篇攻略将介绍如何通过纯CSS代码实现无hack、跨游览器的自适应高度多列布局。 原理 使用CSS3中的Flexible Box模型来实现布局。 具体来说,我们将父容器(con…

    css 2023年6月9日
    00
  • html css js 实现Tab标签页示例代码

    HTML、CSS、JS 实现 Tab 标签页是前端开发中常见的应用场景,可以通过实现 Tab 标签页来实现页面的切换和内容展示。下面我将详细讲解 HTML、CSS、JS 实现 Tab 标签页的攻略: HTML 页面结构 在 HTML 中,每个 Tab 页都可以用一个 div 元素来表示,其中每个 div 元素要包含一个与之相对应的唯一标识符 ID 和相应的内…

    css 2023年6月9日
    00
  • js实现扫雷源代码

    以下是JS实现扫雷游戏的完整攻略。 1. 界面设计 扫雷游戏的界面设计非常重要,需要清晰明了地展示扫雷格子以及游戏信息等元素。 我们可以通过HTML和CSS来实现扫雷游戏的界面设计。 1.1 HTML 在HTML文件中,我们可以使用表格来展示扫雷格子。每个扫雷格子的状态需要通过CSS来定义。 示例代码: <table> <tr> &l…

    css 2023年6月10日
    00
  • 小影怎么分享视频到朋友圈?小影视频分享到微信朋友圈方法介绍

    小影是一款移动端视频编辑和分享软件,支持将视频分享至微信朋友圈。分享到朋友圈可以让更多的人观看你的作品,提高视频的曝光率和影响力。下面是小影分享视频到朋友圈的方法介绍: 方法一:直接在小影中分享到微信朋友圈 在小影编辑视频完成后,点击右上角的“分享”按钮。 在分享页面选择“微信朋友圈”。 在弹出的窗口中选择“发表”或“取消”,即可将视频分享至微信朋友圈。 示…

    css 2023年6月11日
    00
  • 图文详解Element-UI中自定义修改el-table样式

    我会详细讲解如何自定义修改el-table样式。 1. 准备工作 在开始前,请确保你已经安装了element-ui,并且已经能够正常使用。同时,也需要了解一些基础的css知识。 2. 定义CSS样式 首先,我们需要定义一些CSS样式来修改el-table的外观。以下是一些常用的CSS样式: /* 设置表格的边框 */ .el-table__body { bo…

    css 2023年6月10日
    00
  • 在JS中如何使用css变量详解

    在JS中如何使用CSS变量详解 在前端开发中,CSS变量是一种非常实用的技术,它可以帮助开发者更加方便地管理和调整样式。本攻略将详细讲解如何在JS中使用CSS变量,并提供两个示例说明。 1. CSS变量的基本语法 CSS变量是一种新的CSS特性,它可以让开发者定义自己的变量,并在样式表中使用。CSS变量的基本语法如下: :root { –variable-…

    css 2023年5月18日
    00
合作推广
合作推广
分享本页
返回顶部