关于鼠标事件oncontextmenu和onselectstart的js写法问题

最新推荐文章于 2022-09-22 15:07:07 发布
最新推荐文章于 2022-09-22 15:07:07 发布
阅读量1k 收藏
点赞数
分类专栏： javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/u010572782/article/details/50918055
版权
在JavaScript中处理鼠标事件oncontextmenu（禁用右键菜单）和onselectstart（禁止文本复制）时遇到问题。通常直接在标签上添加事件可以生效，但在body元素上，oncontextmenu事件只在文字部分起作用，而在空白区域不起作用。通过js动态添加事件处理程序并固定body尺寸，解决了这个问题，确保两种事件在body的所有区域都能正常工作。
摘要由CSDN通过智能技术生成
刚刚尝试了一下用js写关于鼠标事件oncontextmenu（不显示右键菜单）和onselectstart（禁止copy）的处理程序，发现了一些比较奇怪的现象。一般情况下，给一个网页元素添加oncontextmenu或者onselectstart事件，是可以直接在标签中添加不用写js代码的，比如在body中添加，可以简单写成这样：

oncontextmenu：
关于鼠标事件oncontextmenu和onselectstart的js写法
<
最低0.47元/天 解锁文章
红烧小肥羊
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
vue3 - 实现图片放大缩小和拖曳拖动功能，鼠标移入图像可拖曳移动，鼠标移入图像时滚轮放大缩小功能（vue3网页项目让图片支持鼠标拖动和滚轮放大缩小详细教程，提供完整示例源码，一键复制开箱即用！）
高级前端工程师
12-11 4382
vue3，vue3图片鼠标滚轮放大缩小，vue3图像拖曳拖动，vue3如何实现鼠标拖动图片移动，实现div和图片的拖拽放大缩小，vue3图片图像鼠标可拖动且缩小放大效果，vue3让div容器图片可拖动，图片怎么可鼠标滚轮放大，图像如何支持鼠标拖动和滚轮放大缩小，vue3中实现图片拖拽，vue3实现图片的放大缩小(以鼠标位置为中心放大缩小)以及拖拽功能，图片缩放，实现图片的随意拖动方法，实现用鼠标让图片放大缩小拖拽，vue3鼠标拖动图像 放大缩小，图像滚轮缩放和拖拽，vue3项目中鼠标滚轮缩放图片大小和拖拽效
JavaScript页面交互事件(下)
shuailong1993的博客
05-27 326
解绑事件 复习绑定事件 dom0级 事件 元素.on事件类型 = 事件处理函数 dom2级 事件 元素.addEventListener(‘事件类型’, 事件处理函数) - 标准浏览器 元素.attachEvent(‘on事件类型’, 事件处理函数) - IE 低版本 解绑事件 dom0级 事件解绑 元素.on事件类型 = null 因为是赋值的关系, 所以当我给一个事件赋值为 null 的时候 那么, 当事件触发的时候, 就没有事件处理函数执行了 那么就相当于没有绑定事件是一个道理的 dom2级 事
-moz-user-select与onselectstart 禁止选择文字的方法
09-25
今天无意中注意到QQ、Hi的密码输入框不能用鼠标选择后一次性删除，只能一个一个的删除，然后，就想js中怎么实现这种效果。
onselectstart 和 oncontextmenu user-select
小漠007的专栏
04-27 895
onselectstart几乎可以用于所有对象，其触发时间为目标对象被开始选中时（即选中动作刚开始，尚未实质性被选中）。该事件常使用于使目标对象“禁止变蓝”， 比如在很多地方当用户双击时，一些元素会变成蓝色（选中状态），而当我们要避免这种情况时就可以使用该事件。   oncontextmenu阻止鼠标右键菜单 使用示例如下：   "tmp" onselectstar
JS : onselectstart
小孩No乖的专栏
08-26 785
最近的工作中，接触JS的比较多，碰到个文本框不能拖动选择的问题 发现原来是增加了一个函数 document.onselectstart = function(event) {return false}; 那么页面上的所有的选择事件将失效。 譬如我们可以指定哪些是不能选定的 document.onselectstart= function(event){return test()};...
js-onSelectStart解释
草泥马
07-13 7681
IE&&Chrome中适用此方法 document.onselectstart=function(){return false;} onselectstart是防止内容被选中默认状态是true 选不中 一般如果把它设置在整个body上时如果body里边有输入框需要选中文字时可以这样 function doIt(){ var now=event.src
用js onselectstart事件鼠标禁止选中文字
denglangcheng82460的博客
04-13 278
禁止鼠标选中文本，针对不同浏览器有不同的写法。常见的是onselectstart表示禁止鼠标选中文本。其中用js可以在页面中写 onselectstart="return false" 比如说 <div style="width:200px;height:200px;" onselectstart="return false">这里面的文字是不能被鼠标选中的&lt...
Javascript中的复制粘贴功能
十年代码写十年
10-21 1018
一、基本使用 1.1 API 介绍 复制、剪切、粘贴事件 copy发生复制操作时触发; cut发生剪切操作时触发; paste发生粘贴操作时触发 每个事件都有一个before事件对应：beforecopy、beforecut、beforepaste。这几个before一般不怎么用，所以我们把注意力放在另外三个事件就可以了 触发条件 鼠标右键菜单的复制、粘贴、剪切 ...
前端js常用剪贴板(复制粘贴)操作和应用，以及navigator.clipboard新粘贴板API使用
热门推荐
codingWeb的博客
12-28 1万+
最近的项目上需要做复制粘贴相关的操作，来总结下吧 复制、剪切、粘贴事件： copy 发生复制操作时触发; cut 发生剪切操作时触发; paste 发生粘贴操作时触发; 每个事件都有一个 before 事件对应：beforecopy、beforecut、beforepaste; 这几个 before 一般不怎么用，所以我们把注意力放在三个事件就可以了。 触发条件: 鼠标右键菜单的复制、粘贴、剪切; 使用了相应的键盘组合键，比如:ctrl+c、ctrl+v; 复制操作： copy事件使用示例： &lt
js oncontextmenu事件使用详解
01-19
定义和使用 oncontextmenu 事件在元素中用户右击鼠标时触发并打开上下文菜单。 注意：所有浏览器都支持 oncontextmenu 事件， contextmenu 元素只有 Firefox 浏览器支持。 实例 当用户在 <div> 元素 上右击鼠标时执行 JavaScript ： <div xss=removed contextmenu=mymenu> 用oncontextmenu事件单禁用右键菜单 onconTextmenu=window.event.returnValue=false;右键菜单禁用，用这个可以禁止复制。 在<body>中加
js onselectstart事件（禁止鼠标选中文字）和CSS3 user-select
ssisse的博客
05-14 3062
用js可以在页面中写 onselectstart="return false" 比如说 这里面的文字是不能被鼠标选中的 firefox 实现就更简单了 .aa{-moz-user-select:none;} ..你直接在 这里加的话， 整个页面都不能复制文字了吧。。 如果是针对IE浏览器的话 ，CSS 应该可以这样写,代码如下 .aa{gn:expre
鼠标事件 - contextmenu 和 selectstart
一个小白，博文源于浏览各个大佬所得，感谢行业大佬们！
09-22 974
鼠标事件 - contextmenu 和 selectstart
opera+java+不能用_[置顶] 解决Firefox/Opera 不支持 onselectstart事件
weixin_42613017的博客
02-26 97
在开发中，很多区域是不允许用户select的，在IE/Safari/Chrome中我们可以使用onselectstart事件来阻止用户选定元素内文本，但在火狐中，这段区域还是可以选择的，如下：Firefox/Opera不支持onselectstart事件Textvar div = document.getElementById('noselect');div.onselectstart = fun...
如何让网页字体元素变得可以选择JS的 onselectstart, style的 user-select:none
qq_38192709的博客
10-03 379
问题描述： 如何让网页字体元素变得可以选择。 其渲染出来的代码是这样的： 问题解决： 这个代码就是用 JS 把 onselectstart 变成 return true 外加 style 里面的 user-select: 不见 再严一点， 把 unselectable 里面的 on 变成 off 所以JS 如下， 因为有大量class 为 practice-item 元素 let practice_item = document.getElementsByClassName("practice-ite
右键菜单oncontextmenu
weixin_30369041的博客
07-23 160
右键菜单[上下文菜单]:oncontextmenu 浏览器自带的： a标签可以点击，输入框可以输入文字,可以选中文字···· 阻止浏览器默认：return false; window.onload=function(){ ...
HTML5事件——contextmenu 隐藏鼠标右键菜单
根是地下的枝
07-11 1万+
在window中单击右键或在Mac中Ctrl+单击时会触发contextmenu事件，通过取消其默认动作可以提供自定义事件。
前端学习-JS初级
springxing的博客
06-29 482
今天我们分享js的初级，也是有许多语法，还是要多敲多练才行。每日一句:new、相信自己有能力，那么你就真的会有！ 让我们一起用技术提升美好事物发生的概率！多想，多记，多试，总结错误，多敲多练编程语言：逻辑强 控制行为 主动标记语言：被读取 被动硬件（输入，输出，CPU，硬盘，内存），软件（系统软件，应用软件）js是基于对象和事件的解释性的编程语言js的组成：1.ES（ECMAScript）javascript语法标准2.DOM 文档对象模型（Document Object Model）3.BOM 浏览器对象
oncontextmenu 返回鼠标事件参数
最新发布
05-18
`oncontextmenu`是一个DOM事件，它在用户右键单击元素时触发。当事件被触发时，浏览器会将一个事件对象作为参数传递给事件处理程序。这个事件对象包含了与鼠标事件相关的信息，比如鼠标的位置，鼠标按键状态等。你可以使用这个事件对象来获取鼠标事件的详细信息，并采取相应的操作。例如，在事件处理程序中，你可以使用`event.preventDefault()`方法来取消默认的右键菜单行为，或者使用`event.stopPropagation()`方法来停止事件冒泡。下面是一个示例： ``` <div oncontextmenu="handleContextMenu(event)">右键单击我</div> <script> function handleContextMenu(event) { event.preventDefault(); console.log("鼠标位置：", event.clientX, event.clientY); } </script> ``` 在这个示例中，当用户右键单击`<div>`元素时，`handleContextMenu()`函数会被调用，并且会传入一个事件对象作为参数。在函数中，我们使用`event.preventDefault()`方法来取消默认的右键菜单行为，并使用`event.clientX`和`event.clientY`属性来获取鼠标的位置。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值