在网页中实现右键单击功能

最新推荐文章于 2024-07-07 16:14:45 发布
最新推荐文章于 2024-07-07 16:14:45 发布
阅读量2.6k 收藏 1
点赞数
分类专栏： javascript 文章标签： function javascript border table html delete

 文章转载自:http://www.0971jz.com/Html/HtmlCss/2006-10/12/102241500.html

我们使用的应用系统很多都有右键菜单功能。但是在网页上面，点击右键一般显示的却是IE默认的右键菜单，那么我们如何实现自己的右键菜单呢？下面将讲解右键菜单功能的实现原理和实现代码。

　　实现原理

　　在HTML语言中，基本上每个对象都有一个oncontextmenu事件，这个事件就是鼠标的右键单击事件（onclick事件是鼠标的左键单击事件），那么我们就可以在鼠标右击的时候，让系统弹出一个窗口（这个是popup窗口，显示在IE的最前面，没有菜单），上面显示我们想要显示的菜单信息，当我们单击其中某一项的时候，就执行我们设定的动作，然后将弹出窗口关闭。

　　实现代码

　　下面我写了一个示例代码，模拟一个树型菜单，当我们右键点击树型菜单某一项的时候，就会弹出右键菜单，里面有“新增”、“修改”、“删除”三个菜单项，单击某项会执行相应的操作。如果是在页面的其它地方点击右键的话，就只显示“新增”一个菜单项。下面的代码内容：

contextmenuDemo.html文件

―――――――――――――――――――――――――――――――――

<%--

/**

*实现右键菜单功能

*/

--%>

<html>

　　<body oncontextmenu = showMenu('')>

　　　　<form name = "menuForm">

　　　　　　<!--隐藏框，用来保存选择的菜单的id值-->

　　　　　　<input type = "hidden" name = "id" value = "">

　　　　　　<table>

　　　　　　<tr><td><a href="javascript:clickMenu()"　oncontextmenu = showMenu('0')>根目录</a></td></tr>

　　　　　　<tr><td><a href="javascript:clickMenu()"　oncontextmenu = showMenu('1')>菜单一</a></td></tr>

　　　　　　<tr><td><a href="javascript:clickMenu()"　oncontextmenu = showMenu('2')>菜单二</a></td></tr>

　　　　　　</table>

　　　　</form>

　　</body>

　　<!-- 这里用来定义需要显示的右键菜单 -->

　　<div id="itemMenu" style="display:none">

　　　　　 <table border="1" width="100%" height="100%" bgcolor="#cccccc" style="border:thin" cellspacing="0">

　　　　　　　　　<tr>

　　　　　　　　　　　<td style="cursor:default;border:outset 1;" align="center" οnclick="parent.create()">

　　　　　　　　　　　新增

　　　　　　　　　　　</td>

　　　　　　　　　</tr>

　　　　　　　　　<tr>

　　　　　　　　　　　<td style="cursor:default;border:outset 1;" align="center" οnclick="parent.update();">

　　　　　　　　　　　修改

　　　　　　　　　　　</td>

　　　　　　　　　</tr>

　　　　　　　　　<tr>

　　　　　　　　　　　<td style="cursor:default;border:outset 1;" align="center" οnclick="parent.del()">

　　　　　　　　　　　删除

　　　　　　　　　　　</td>

　　　　　　　　　</tr>

　　　　　 </table>

　　</div>

　　<!-- 右键菜单结束-->

</html>

<script language="JavaScript">

/**

*根据传入的id显示右键菜单

*/

function showMenu(id)

{

　　menuForm.id.value = id;

　　if("" == id)

　　{

　　　　popMenu(itemMenu,100,"100");

　　}

　　else

　　{

　　　　popMenu(itemMenu,100,"111");

　　}

　　event.returnValue=false;

　　　 event.cancelBubble=true;

　　　 return false;

}

/**

*显示弹出菜单

*menuDiv:右键菜单的内容

*width:行显示的宽度

*rowControlString:行控制字符串，0表示不显示，1表示显示，如“101”，则表示第1、3行显示，第2行不显示

*/

function popMenu(menuDiv,width,rowControlString)

{

　　//创建弹出菜单

　　var pop=window.createPopup();

　　//设置弹出菜单的内容

　　pop.document.body.innerHTML=menuDiv.innerHTML;

　　var rowObjs=pop.document.body.all[0].rows;

　　//获得弹出菜单的行数

　　var rowCount=rowObjs.length;

　　//循环设置每行的属性

　　for(var i=0;i<rowObjs.length;i++)

　　{

　　　　//如果设置该行不显示，则行数减一

　　　　var hide=rowControlString.charAt(i)!='1';

　　　　if(hide){

　　　　　　rowCount--;

　　　　}

　　　　//设置是否显示该行

　　　　rowObjs[i].style.display=(hide)?"none":"";

　　　　//设置鼠标滑入该行时的效果

　　　　rowObjs[i].cells[0].οnmοuseοver=function()

　　　　{

　　　　　　this.style.background="#818181";

　　　　　　this.style.color="white";

　　　　}

　　　　//设置鼠标滑出该行时的效果

　　　　rowObjs[i].cells[0].οnmοuseοut=function(){

　　　　　　this.style.background="#cccccc";

　　　　　　this.style.color="black";

　　　　}

　　}

　　//屏蔽菜单的菜单

　　pop.document.οncοntextmenu=function()

　　{

　　　　　　return false;

　　}

　　//选择右键菜单的一项后，菜单隐藏

　　pop.document.οnclick=function()

　　{

　　　　　　pop.hide();

　　}

　　//显示菜单

　　pop.show(event.clientX-1,event.clientY,width,rowCount*25,document.body);

　　return true;

}

function create()

{

　　alert("create" + menuForm.id.value + "!");

}

function update()

{

　　alert("update" + menuForm.id.value + "!");

}

function del()

{

　　alert("delete" + menuForm.id.value + "!");

}

function clickMenu()

{

　　alert("you click a menu!");

}

</script>

chenhuizhouhb
关注
专栏目录
jquery禁用右键单击功能屏蔽F5刷新
10-23
本文将详细介绍如何使用jQuery实现禁用网页上的右键单击功能以及如何屏蔽F5刷新操作。 首先我们来讨论如何禁用网页上的右键单击功能。通常，当用户在网页上点击鼠标右键时，浏览器会弹出一个上下文菜单（context ...
树形菜单控件
01-11 5486
jQuery plugin: Treeview 这个插件能够把无序列表转换成可展开与收缩的Tree。   主页:http://bassistance.de/jquery-plugins/jquery-plugin-treeview/ 下载:http://jquery.bassistance.de/treeview/jquery.treeview.zip 示例:http://
HTML中实现右键菜单功能
sunlen的专栏(编程技术探讨)
01-09 9369
HTML中实现右键菜单功能我们使用的应用系统很多都有右键菜单功能。但是在网页上面，点击右键一般显示的却是IE默认的右键菜单，那么我们如何实现自己的右键菜单呢？下面将讲解右键菜单功能的实现原理和实现代码。 实现原理在HTML语言中，基本上每个对象都有一个oncontextmenu事件，这个事件就是鼠标的右键单击事件（onclick事件是鼠标的左键单击事件），那么我们就可以在鼠标右击的时候，让系统弹出
onMouseDown和onCLick的区别
最新发布
weixin_63681863的博客
07-07 360
触发时机：鼠标按钮被按下的瞬间触发。onClick：鼠标按钮被按下并释放后触发。使用场景用于捕获鼠标按下的瞬间，通常用于启动诸如拖动操作等交互。onClick用于处理用户的点击行为，通常用于实际的点击操作，如按钮点击、链接跳转等。组合使用可以结合使用这两个事件来实现不同的用户交互效果，比如在设置状态以启动某个操作，在onClick执行最终的确认行为。综上所述，和onClick分别用于捕获鼠标按钮按下的瞬间和完成点击操作后的响应，各自在不同的交互阶段发挥作用。
element tree树结构 “右键自定义菜单”
冰冰酱
03-23 1571
el-tree右键菜单
python中tkinter使用Treeview树形组件为页面添加多个菜单、树形菜单的获取、编辑
statistics+insight+vista+power
07-13 421
python中tkinter使用Treeview树形组件为页面添加多个菜单、树形菜单的获取、编辑
element-ui 树形控件el-tree右键自定义菜单实现节点增删改
Luo_LA的博客
01-13 1万+
效果展示： 实现步骤： 展示树形文件夹 @node-contextmenu=“floderOption”：element-ui定义的右键点击事件 data为element-ui中自带的json格式的数据 <el-tree :data="data" draggable node-key="id" @node-contextmenu="floderOption"> <span class="custom-tree-node" slot-scope="{ node, data }"&g
jQuery禁用键盘后退屏蔽F5刷新及禁用右键单击
10-22
在网页开发中，有时出于特定需求，我们可能需要禁用某些用户交互行为，例如禁用键盘的后退键（F5或Backspace）、屏蔽右键单击菜单以及阻止页面的刷新动作。这篇内容将详细解释如何使用jQuery实现这些功能。 1. **...
play_on_spotify:Chrome扩展程序可以选择歌曲名称，右键单击并在Spotify中播放
05-12
通过“可以选择歌曲名称，右键单击并在Spotify中播放”这一描述，我们可以推断出这个扩展可能集成了一种机制，可以识别网页上的歌曲信息，并且能够与Spotify的API进行交互，实现从浏览器到Spotify应用的无缝跳转和...
imagesearch:另一个用于 Safari 的右键单击图像搜索插件
07-03
它特别强调了其适配Safari浏览器，并且支持右键单击图像进行搜索，这种设计符合大多数用户的操作习惯，使得用户无需离开当前页面就能进行图像搜索。 标签“JavaScript”揭示了这个插件的实现技术。JavaScript是一种...
JS修改网页的右击事件
12-11
屏蔽网页右键事件. 并弹出自己写的右击菜单
ztree树形菜单的增加删除修改和换图标
weixin_30681121的博客
03-27 474
首先需要注意一点，如果有研究过树形菜单，就会发现实现删除和修改功能特别简单，但是增加却有一点复杂。造成这个现象是ztree树形菜单的历史遗留问题。大概是之前的版本没有增加这个功能，后来的版本加上了这个功能，造成了增加和别的功能不一样。 先说编辑和删除，注意：树形菜单内容是从json中获取的。 一、需要引入的文件和界面 二、js部分，设置setting var zTreeObj; ...
树形菜单增删除改查
m0_74828356的博客
08-30 157
1）data中定义index ，根据点击事件，进行赋值 this.index = row._id。(row是点击事件传过来的整条数据)写两组按钮，根据状态进行变化。2）v-show进行判断。
【ztree系列】右键菜单、节点伸缩
热门推荐
Cherie
01-09 2万+
在网页设计中，一般很少使用右键功能，当我们未定义右键操作的时候，默认的都是调用浏览器事件。但是在有些情况下，例如为了节省页面空间（让页面更简洁、美观）或者是用户不常用的一些功能，我们就可以把它们都放在右键菜单里边了。下面以tree节点伸缩为例，来聊聊我们的右键菜单。 一、简述         右键菜单的功能是这样来的，首先设计一个菜单，用于右击显示；菜单上放置一些元素（控件），以供我们选择；然
Element(3) 使用v-org-tree组件实现组织树形菜单
郑清
07-25 3968
一、前言 iview-admin中提供了 v-org-tree 这么一个vue组件可以实现树形菜单，下面小编来提供一下在element-ui中的使用教程 小编集成了el-dropdown下拉菜单（鼠标左击显示菜单），和右击自定义菜单，两种方式，效果图如下： 二、使用教程 （1）安装依赖 npm install clipboard npm install v-click-outside-x npm...
VS Code 右键打开 HTML 的插件 Open in Browser（在浏览器中打开）和 Live Server（实时服务器）
记录个人成长, 分享好用资源
05-16 1419
（在浏览器中打开）和（实时服务器）。
js实现导航菜单树形结构
我是小奶音啊的博客
02-04 1024
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-U...
php 右键下拉菜单,js实现右键菜单功能
weixin_35253177的博客
03-24 148
本文解决的问题：1、实现右键菜单功能代码；2、阻止默认事件的实际应用。右键菜单#menu {position: fixed;left:0;top:0;width:200px;height: 400px;background-color: blue;display: none;}var menu = document.getElementById("menu");document.oncontext...
QWebEngineView中加载网页并且右键保存图像C++编程
06-13
您可以使用QWebEngineView类来加载网页并在右键单击时保存图像。下面是一个用于实现此功能的C++代码示例： ```c++ #include <QtWidgets/QApplication> #include <QtWidgets/QMainWindow> #include <QtWebEngineWidgets/QWebEngineView> #include <QtCore/QUrl> #include <QtCore/QDebug> #include <QtGui/QContextMenuEvent> #include <QtGui/QPixmap> #include <QtWidgets/QMessageBox> class MyWebEngineView : public QWebEngineView { public: explicit MyWebEngineView(QWidget* parent = nullptr) : QWebEngineView(parent) {} protected: void contextMenuEvent(QContextMenuEvent* event) override { QMenu* menu = page()->createStandardContextMenu(); QAction* saveImageAction = new QAction(tr("Save Image"), this); connect(saveImageAction, &QAction::triggered, this, &MyWebEngineView::handleSaveImageAction); menu->addAction(saveImageAction); menu->exec(event->globalPos()); delete saveImageAction; delete menu; } private slots: void handleSaveImageAction() { QUrl imageUrl = page()->contextMenuData().imageUrl(); if (imageUrl.isEmpty()) { QMessageBox::warning(this, tr("Save Image"), tr("No image selected")); return; } QPixmap pixmap; if (!pixmap.load(imageUrl.toDisplayString(QUrl::FullyEncoded))) { QMessageBox::warning(this, tr("Save Image"), tr("Failed to load image")); return; } QString fileName = QFileDialog::getSaveFileName(this, tr("Save Image"), "", tr("Images (*.png *.xpm *.jpg)")); if (fileName.isEmpty()) { return; } if (!pixmap.save(fileName)) { QMessageBox::warning(this, tr("Save Image"), tr("Failed to save image")); return; } } }; int main(int argc, char* argv[]) { QApplication app(argc, argv); QMainWindow mainWindow; MyWebEngineView* webEngineView = new MyWebEngineView(&mainWindow); mainWindow.setCentralWidget(webEngineView); webEngineView->load(QUrl("https://www.baidu.com/")); mainWindow.show(); return app.exec(); } ``` 在上面的代码中，我们创建了一个名为MyWebEngineView的自定义QWebEngineView类，并覆盖了contextMenuEvent()函数来实现右键菜单。我们添加了一个名为“Save Image”的动作，并将其连接到handleSaveImageAction()槽函数。当用户选择“Save Image”选项时，我们将从contextMenuData()中获取图像的URL，并使用QPixmap加载图像。最后，我们将使用QFileDialog保存图像。 请注意，为了正确使用QWebEngineView，您需要在项目文件中包含QtWebEngineWidgets模块，并将以下行添加到main()函数中： ```c++ QApplication::setAttribute(Qt::AA_EnableHighDpiScaling); ``` 这是因为QWebEngineView需要启用高分辨率DPI缩放。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值