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

在JavaScript中处理鼠标事件oncontextmenu(禁用右键菜单)和onselectstart(禁止文本复制)时遇到问题。通常直接在标签上添加事件可以生效,但在body元素上,oncontextmenu事件只在文字部分起作用,而在空白区域不起作用。通过js动态添加事件处理程序并固定body尺寸,解决了这个问题,确保两种事件在body的所有区域都能正常工作。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

刚刚尝试了一下用js写关于鼠标事件oncontextmenu(不显示右键菜单)和onselectstart(禁止copy)的处理程序,发现了一些比较奇怪的现象。一般情况下,给一个网页元素添加oncontextmenu或者onselectstart事件,是可以直接在标签中添加不用写js代码的,比如在body中添加,可以简单写成这样:

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

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

然后直接在浏览器中打开网页:
关于鼠标事件oncontextmenu和onselectstart的js写法

按理说,用鼠标右击网页body部分是不显示菜单的,里面的文字也是没办法选择复制的。但是奇怪的事情就是发生在这里,onselectstart事件处理没问题,也就是不可以选择文字复制,但是oncontextmenu就有点奇葩,右击网页空白部分居然可以显示右键菜单,只有在右击文字部分的时候才不会显示右键菜单。
针对这一奇怪的现象,我试着用另一种方法添加事件处理程序,用js完成一部分代码:

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

这里不同的地方在于return后面接的代码不一样,在这里我没有retrun false,而是return了一个函数test()。事实证明还是不行,依然跟第一种方法的结果一样。但是这种方法用在onselectstart事件仍然是没有任何问题的。
最后我又尝试了第三种方法,就是不在body标签中添加,而是直接用js代替:

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

然后这样就成功了。无论右击网页中body的任何地方,都可以成功打印,不显示右键菜单:

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



这个方法应用在onselectstart事件也仍然有效。不明白为何针对oncontextmenu前两种方法行不通。后来我觉得问题应该是出在body身上,为什么前两种方法中点击别的地方无效而单单是点击文字的时候有效呢?文字肯定包含在body中,那么其他空白的地方是不是就没有包含在body中呢?默认的body是不是有什么不可告人的秘密呢?于是我尝试给body固定了尺寸,像这样:
 
关于鼠标事件oncontextmenu和onselectstart的js写法

然后我发现所有问题就迎刃而解了.....果然是body默认属性有问题,如果固定了尺寸,那么所有问题就不是问题了。以上三种方法就都可以成功添加这两种鼠标事件了关于鼠标事件oncontextmenu和onselectstart的js写法
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值