前端页面禁止鼠标拖拽事件

已于 2023-08-13 12:27:27 修改
阅读量510 收藏 2
点赞数 1
文章标签： java 前端 服务器
于 2023-08-13 12:20:40 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_37647812/article/details/132258309
版权

页面禁止鼠标拖拽、选取、复制文字等功能，主要设计如下4项参数：

1、参数 oncontextmenu

        oncontextmenu = "return false;" //禁止鼠标右键

2、参数 ondragstart

        ondragstart = "return false;" //禁止鼠标拖动

3、参数 onselectstart

        onselectstart = "return false;" //文字禁止鼠标选中

4、参数 onselect ​​​​​​​

        onselect = "document.selection.empty();" //禁止复制文本

页面中使用如下：

<body  style="margin:0 auto;padding:0 auto;overflow:hidden;" oncontextmenu = "return false;" ondragstart = "return false;" onselectstart = "return false;" onselect = "document.selection.empty();">

magic33416563
关注
  • 1
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
Web前端开发笔记-----23.阻止默认行为、拖拽、事件委托
m0_51546204的博客
03-29 387
Web前端开发笔记-----23.阻止默认行为、拖拽、事件委托 文章目录Web前端开发笔记-----23.阻止默认行为、拖拽、事件委托一、阻止默认行为1.阻止浏览器中右键默认菜单。2.阻止超链接默认行为二、拖拽三、事件委托 一、阻止默认行为 1.阻止浏览器中右键默认菜单。 阻止默认行为： <script> window.onload = function(){ document.oncontextmenu = function(){
js 前端鼠标拖动事件实例
12-11
在JavaScript前端开发中，鼠标拖动事件是一种常见的交互方式，让用户能够通过鼠标操作元素在页面上移动。这个实例主要涉及的关键词是“js”（JavaScript）、“ASP”（尽管在这个上下文中并不直接相关，但可能是用户...
禁止页面接受拖动文本
weixin_34364135的博客
07-02 223
设置body标签的ondragenter="return false;"。 转载于:https://www.cnblogs.com/kakaxu/archive/2008/07/02/1233884.html
禁止页面拖拽事件（数据什么的）
weixin_33940102的博客
02-26 415
//禁止页面数据拖拽function forbidDataDrafting() { 　　document.ondragstart = function () { 　　return false; 　　};} ...
css禁止鼠标事件
weixin_30649859的博客
12-01 273
1.需求：最近经常用到dom节点禁用鼠标事件的属性，比如loading状态的时候，比如点击按钮之后禁止再次点击的时候，比如加载更多之后没有数据了的时候，巴拉巴拉。。。 2.问题：但是，经常记不住啊，查了好几次了，这次写下来，认真认识一下pointer-events,目标是不在search 3.正题： 　　01.我是html <button type="button">加载更...
拖拽禁止点击事件
deficientt8418的博客
03-06 460
拖拽禁止点击事件：在鼠标移动时添加一个css禁用鼠标点击事件 鼠标抬起时删除这个css 转载于:https://www.cnblogs.com/luofeng316148334/p/6509214.html
前端canvas例子，拖拽事件。画板案例
06-15
内容概要：canvas案例，画板案例。...双击浏览器打开即可看效果，F12模拟手机之后鼠标移动可实现画板功能的案例 能学到什么：canvas技术 适用人群： 前端canvas学习新手 阅读建议：支持canvas的浏览器
javascript 鼠标滚轮事件
10-30
由于鼠标滚轮事件在 IE 和 FF 的实现有点不一样，所以有需要把这个写成一个统一可用的事件。
AjaxUI：鼠标拖拽
10-31
实现鼠标拖拽功能主要依赖于以下几种鼠标事件： - `mousedown`：当用户按下鼠标按钮时触发。 - `mousemove`：当鼠标移动时持续触发。 - `mouseup`：当用户释放鼠标按钮时触发。 这些事件是实现鼠标拖拽功能的基础。...
解决VUE自定义拖拽指令时 onmouseup 与 click事件冲突问题
10-15
主要介绍了解决VUE自定义拖拽指令时 onmouseup 与 click事件冲突问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
js 鼠标事件的禁止
wzwzwz555的博客
09-06 3081
document.oncopy = function(){ event.returnValue = false; } // 或者直接返回整个事件 document.oncopy = function(){ return false; } document.oncontextmenu=new Function("event.returnValue=false;"); documen...
vuedraggable 阻止默认拖动事件
最新发布
Admans的专栏
01-21 580
【代码】vuedraggable 阻止默认拖动事件。
css3 禁止点击
weixin_45162984的博客
04-09 353
禁止点击div pointer-events: none; //想要后代元素点击，添加pointer-events: auto; 值 auto 与pointer-events属性未指定时的表现效果相同，对于SVG内容，该值与visiblePainted效果相同 none 元素永远不会成为鼠标事件的target。但是，当其后代元素的pointer-events属性指定其他值时，鼠标事件可...
pointer-events（禁止鼠标事件）
SeriousLose
06-21 1117
pointer-events: none; 鼠标事件失效（链接、点击等事件） 常用场景： 验证码获取； 等禁止鼠标事件； 注意： pointer-events 的值为 none 时，如果元素上绝对定位，那在它下一层的元素可以被选中。 pointer-events:...
黑豹程序员-vue页面禁止鼠标拖动
长安紫薯的专栏
11-22 213
禁止页面拖动鼠标
JavaScript 禁止拖动
wmiao89620的专栏
09-25 338
ondragstart= 'return false;'
移动端禁止拉动页面
热门推荐
Eling
08-30 1万+
document.body.addEventListener('touchmove', function (e) { e.preventDefault(); }, {passive: false});  
html 禁止手机拖拽操作,html怎么禁止拖拽
weixin_39907939的博客
06-16 287
html禁止拖拽的方法：首先打开相应的HTML代码文件；然后通过“οndragstart="return false;"”方法实现禁止鼠标拖动即可。本文操作环境：Windows7系统、HTML5版，DELL G3电脑Html禁用拖拽功能如何禁用页面元素拖出去？οndragstart="return false;"//禁止鼠标拖动，如拖动图片、连接等例如：如何禁用拖元素进入页面？document.o...
用前端代码写一段监听鼠标拖拽事件的例子
02-23
答：下面是一段监听鼠标拖拽事件的前端代码：let mousePosition;document.addEventListener('mousedown', (e) => { mousePosition = { x: e.pageX, y: e.pageY }; });document.addEventListener('mouseup', (e) => { const distance = Math.sqrt( Math.pow(mousePosition.x - e.pageX, 2) + Math.pow(mousePosition.y - e.pageY, 2) ); if (distance > 5) { // 鼠标拖拽事件 } });
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

magic33416563

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值