js+css实现禁止鼠标右键与选中网页文字

最新推荐文章于 2023-04-28 11:06:31 发布
最新推荐文章于 2023-04-28 11:06:31 发布
阅读量213 收藏
点赞数
文章标签： javascript ViewUI
关于禁止右键的文章，烈火也曾经提到过几篇，相关代码都比较冗长，不够精简，在本文中我们来看一个js+css简单实现的代码，可以禁止鼠标右键及选中网页中的文字,支持Firefox火狐浏览器。 CSS代码： body{ -moz-user-select:none; hutia:expression(this.onselectstart=function(){return(false)});} JavaScript代码： <script language="JavaScript"> document.οncοntextmenu=function(e){return false;}</script> 注:JavaScript代码和CSS代码缺一不可,此代码支持Firefox浏览器.

iteye_20954
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
JS鼠标右键移动批量选中代码
07-24
在JavaScript编程中，实现鼠标右键移动批量选中功能是一项常见的需求，特别是在数据管理或图形编辑等场景。这种功能能够允许用户通过鼠标操作快速选择多个元素，提高交互体验。本篇将详细介绍如何利用JS实现这一功能...
如何禁用网页复制选中以及鼠标右击
qq_38952126的博客
10-11 1708
如何禁用网页复制选中以及鼠标右击
禁止右键禁止复制禁止选择网页内容的CSS和JS代码（支持PC和移动端）
阿酷tony
04-28 898
禁止右键禁止复制禁止选择网页内容的CSS和JS代码（支持PC和移动端），收藏吧，用得上。
页面 禁止鼠标选择，右键、复制、粘贴 的css 和 js （兼容性好）
weixin_41883384的博客
05-21 3276
方法一：用纯CSS 禁止鼠标点击事件 （兼容 firefox, google chrome, IE9以上浏览器）&lt;style&gt;.rules{    -moz-user-select: none;     -webkit-user-select: none;     -ms-user-select: none;     -khtml-user-select: none;     us...
html css屏蔽右键,css右键菜单.html
weixin_32251071的博客
06-02 876
.menu {width: 100px;font-size: 14px;font-family: "微软雅黑";border: 1px solid #ccc;z-index: 9999;position: absolute;display: none;background: #f2f2f2;}.menu ul {margin: 0px;padding: 0px;text-align: center...
JS/CSS实现页面禁用右键、键盘和下载
xuerba的博客
11-27 1917
#JS/CSS实现页面禁用右键、键盘和下载 具体使用方法见代码： <html> <style> /*禁用打印， 打印内容为空白*/ @media print{ body{display:none} } </style> <head></head> <body> <!-- embed标签禁用...
JS鼠标右键移动批量选中代码.zip
最新发布
10-08
标题中的"JS鼠标右键移动批量选中代码.zip"指的是一个使用JavaScript实现的特性，它允许用户通过鼠标右键点击并拖动来批量选择网页上的元素。这种功能常见于数据表格或者列表，使得用户能够方便地操作大量信息。在...
flex禁止鼠标右键
09-15
在网页开发中，有时我们可能需要对某些元素或者整个页面设置禁止鼠标右键操作，以防止用户通过右键菜单执行不希望出现的功能，比如复制、查看源代码等。标题"flex禁止鼠标右键"提示我们要关注的是在使用Flex布局的...
openlayers3+ 地图右键
07-16
在OpenLayers 3及以上版本中，地图右键功能的实现是一项关键操作，它允许用户与地图交互并执行特定任务，如获取地图上的坐标、测量距离、添加标记等。本篇文章将详细探讨如何在OpenLayers中自定义地图右键菜单，以...
js实现右键自定义菜单
10-20
这个简单的JavaScript实现为网页添加了一个响应式的右键菜单，用户可以根据自定义的菜单项进行操作。这种自定义菜单的实现方式具有很高的灵活性，可以通过添加或修改菜单项，以及调整样式，来适应不同的应用场景。...
禁用右键和复制JS代码
03-26
本代码是禁用右键和复制JS代码, 不让别人剽窃自己的成果
用纯CSS实现禁止鼠标点击事件示例代码
12-13
JavaScript有一个preventDefault方法, 他可用以来取消事件的默认动作。比如取消打开链接，选择文本或拖放等。 复制代码代码如下:event.preventDefault() 该方法将通知 Web 浏览器不要执行与事件关联的默认动作（如果存在这样的动作）。例如，如果 type 属性是 “submit”，在事件传播的任意阶段可以调用任意的事件句柄，通过调用该方法，可以阻止提交表单。注意，如果 Event 对象的 cancelable 属性是 fasle，那么就没有默认动作，或者不能阻止默认动作。无论哪种情况，调用该方法都没有作用。 这种方法可以阻止当前元素的浏览器默认行为，但并
CSS设置选中网页文字时的背景和颜色
12-06
CSS设置选中网页文字时的背景和颜色，内容包含默认样式、设置样式，具体可见文档内CSS样式设置。
CSS改变网页中鼠标选中文字背景颜色例子
01-19
一个不是那么众所周知的技术就是我们可以在浏览器里美化被选择的文字的样式。Windows自身提供的是一种很难看的墨绿色的颜色，而苹果电脑上提供的是浅绿色。火狐浏览器，IE9，Opera和谷歌浏览器允许我们自定义被选择文字的颜色。让我来展示给你看： CSS代码 复制代码代码如下:/* webkit, opera, IE9 */::selection { background:lightblue; }/* mozilla firefox */::-moz-selection { background:lightblue; }-moz-属性前缀是个火狐浏览器用的，而基本的::selection选择器是
html css禁用右键,HTML+CSS入门 禁用点击事件详解
weixin_29938119的博客
06-02 823
本篇教程介绍了HTML+CSS入门 禁用点击事件详解，希望阅读本篇文章以后大家有所收获，帮助大家HTML+CSS入门。<11.css禁用鼠标点击事件23.disabled{pointer-events:none;}4注：(这个没有试过)567jquery禁用a标签方法18$(document).ready(function(){9$...
html css屏蔽右键,css屏蔽元素的鼠标事件pointer-events_html/css_WEB-ITnose
weixin_33489161的博客
06-02 514
// 屏蔽点击$('body').css('pointer-events', 'none');//恢复默认$('body').css('pointer-events', 'auto');用处：可以在弹出层的时候或者fixed定位时，设置下面元素的鼠标事件var pop = function(msg, delay, cb) { var _msg = msg || '网络不给力，请稍后再...
JS禁止右键，禁止Ctrl键，禁止选中文字
weixin_34404393的博客
08-22 235
Ctrl 和 Shift限定(IEOnly) document.onmousewheel=function() { if(event.ctrlKey||event.shiftKey) { event.returnValue=false; } } 转载于:https://www.cnblogs.com...
用CSS禁止选择、复制和鼠标右键
爱生活
09-29 5235
css">body{glacier:expression(document.body.onselectstart=document.body.oncontextmenu=function(){return false;});} 
关于网页源代码屏蔽
weixin_34346099的博客
11-01 1571
很早就想写一篇关于网页源代码屏蔽的文章。是因为经常编出些JS脚本的之后，在沾沾自喜的同时，也在担心源代码会被人家看到，盗用我的脚本。所以一直以来，我都在尽力维护我的网页源代码的安全。虽然目前还没有找到完全安全的屏蔽方法（也就是说，这些方法在我想出来的同时，自己已经知道其弱点和破解方法了），但是，我这里有很多屏蔽的思路，来总结一下。 　　众所周知，要保护一个页面，最基础的就是要屏蔽右键。而现在网...
node+layui实现，鼠标右键点击table中的一条数据，弹出一个菜单选项
06-06
要实现这个功能，你可以通过以下步骤进行操作： 1. 给你的 table 绑定右键菜单事件，可以使用 jQuery 的 `contextmenu` 事件来实现，代码如下： ``` $('table').on('contextmenu', 'tr', function(e) { // 阻止默认的右键菜单弹出 e.preventDefault(); // 获取当前行的数据 var data = $(this).data('data'); // 显示右键菜单 showMenu(e.pageX, e.pageY, data); }); ``` 2. 编写 `showMenu` 函数来显示右键菜单，代码如下： ``` function showMenu(x, y, data) { // 创建菜单元素 var menu = $('<div class="menu"></div>'); // 添加菜单选项 menu.append('<div class="menu-item">编辑</div>'); menu.append('<div class="menu-item">删除</div>'); // 设置菜单样式 menu.css({ 'position': 'fixed', 'top': y + 'px', 'left': x + 'px' }); // 添加菜单到页面 $('body').append(menu); } ``` 3. 设置菜单的样式和行为，代码如下： ``` // 菜单样式 .menu { position: fixed; background-color: #fff; border: 1px solid #ccc; box-shadow: 0 0 5px rgba(0,0,0,.2); z-index: 9999; } .menu-item { padding: 5px 10px; cursor: pointer; } .menu-item:hover { background-color: #f5f5f5; } // 菜单行为 $('body').on('click', '.menu-item', function() { var text = $(this).text(); // 根据菜单选项执行不同的操作 if (text === '编辑') { // 编辑操作 } else if (text === '删除') { // 删除操作 } // 隐藏菜单 $('.menu').remove(); }); ``` 4. 最后，你需要在每行数据中添加相应的数据，代码如下： ``` <table> <tr data-data="{id: 1, name: '张三', age: 20}"> <td>1</td> <td>张三</td> <td>20</td> </tr> <tr data-data="{id: 2, name: '李四', age: 30}"> <td>2</td> <td>李四</td> <td>30</td> </tr> ... </table> ``` 这样，你就可以在鼠标右键点击 table 中的一条数据时，弹出一个菜单选项了。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值