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日

相关文章

  • HTML常用标签超详细整理

    下面就是”HTML常用标签超详细整理”的完整攻略: HTML常用标签超详细整理 HTML是网页开发的基础语言。在这里,我们将带你深入了解HTML常用标签及其使用方法,让你轻松掌握网页开发技巧。 标题 HTML中的标题标签用于定义网页的标题(通常在浏览器的标签上显示),并且也用于将文字进行分级。 共有6级标题,分别是h1到h6 <h1>Headin…

    css 2023年6月9日
    00
  • HTML和CSS的关键:盒子模型(Box model)

    HTML和CSS是网页制作基础技能,而盒子模型(Box model)是学习和使用这两种技术的关键。盒子模型是指网页中每一个元素都可以看做是一个长方形的盒子,该盒子包含了元素的内容、内边距(padding)、边框(border)和外边距(margin)。 盒子模型结构 盒子模型可以分为以下四个部分: 内容(Content):元素的真正内容,比如文本、图片; 内…

    css 2023年6月10日
    00
  • 使用three.js实现炫酷的酸性风格3D页面效果

    使用Three.js实现炫酷的酸性风格3D页面效果的攻略可以从以下几个步骤来展开: 1. 准备环境 在使用Three.js之前,需要先准备好开发环境。基本环境包括WebGL的支持,开发语言为JavaScript。如果你已经准备好了开发环境,那么我们可以直接进入下一步。 2. 导入Three.js库 在使用Three.js之前,需要在HTML文档中导入Thre…

    css 2023年6月10日
    00
  • 基于html和CSS3制作酷炫的导航栏

    制作酷炫的导航栏需要掌握 HTML 和 CSS3 的相关知识,下面是一些制作导航栏的示例和攻略: 1. 基础导航栏 首先,在 HTML 中创建一个无序列表,每个列表项表示一个导航标签,并用 CSS 对列表进行样式设置。可以给选中的导航标签添加不同的背景色或字体样式,以突出其特殊性。 HTML 代码示例: <nav> <ul> <…

    css 2023年6月9日
    00
  • 一款纯css3实现的非常实用的鼠标悬停特效演示

    下面是详细的攻略: 纯CSS3实现非常实用的鼠标悬停特效 1. 准备工作 在开始实现鼠标悬停特效之前,我们需要先准备好HTML和CSS文件,并创建相应的结构和样式。 HTML部分的结构比较简单,可以根据自己的需要进行修改。下面是一个简单的示例: <div class="box"> <div class="con…

    css 2023年6月10日
    00
  • 使用BootStrap实现表格隔行变色及hover变色并在需要时出现滚动条

    使用Bootstrap实现表格隔行变色及hover变色并在需要时出现滚动条,可以通过以下几个步骤进行: 1. 引入Bootstrap和CSS文件 首先,需要在HTML文档中引入Bootstrap样式库和CSS文件,可以通过以下代码进行引入: <link rel="stylesheet" href="https://cdn.…

    css 2023年6月10日
    00
  • html5 CSS过度-webkit-transition使用介绍

    HTML5 CSS过度-webkit-transition使用介绍 -webkit-transition 是 CSS3 中的一个属性,用于实现元素的过渡效果。本文将详细讲解 -webkit-transition 的使用方法和示例说明。 1. -webkit-transition 的语法 -webkit-transition 属性的语法如下: -webkit-…

    css 2023年5月18日
    00
  • 在JavaScript中获取请求的URL参数[正则]

    获取请求的URL参数在Web开发中非常常见。JavaScript提供了多种方式来获取URL参数,其中使用正则表达式进行匹配是一种非常常用的方式,下面是完整的攻略。 1.使用正则表达式进行URL参数提取 以下正则表达式用于匹配URL参数: let reg = new RegExp("(^|&)" + name + "=([…

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