刚刚尝试了一下用js写关于鼠标事件oncontextmenu(不显示右键菜单)和onselectstart(禁止copy)的处理程序,发现了一些比较奇怪的现象。一般情况下,给一个网页元素添加oncontextmenu或者onselectstart事件,是可以直接在标签中添加不用写js代码的,比如在body中添加,可以简单写成这样:
oncontextmenu:
onselectstart:
然后直接在浏览器中打开网页:
按理说,用鼠标右击网页body部分是不显示菜单的,里面的文字也是没办法选择复制的。但是奇怪的事情就是发生在这里,onselectstart事件处理没问题,也就是不可以选择文字复制,但是oncontextmenu就有点奇葩,右击网页空白部分居然可以显示右键菜单,只有在右击文字部分的时候才不会显示右键菜单。
针对这一奇怪的现象,我试着用另一种方法添加事件处理程序,用js完成一部分代码:
这里不同的地方在于return后面接的代码不一样,在这里我没有retrun false,而是return了一个函数test()。事实证明还是不行,依然跟第一种方法的结果一样。但是这种方法用在onselectstart事件仍然是没有任何问题的。
最后我又尝试了第三种方法,就是不在body标签中添加,而是直接用js代替:
然后这样就成功了。无论右击网页中body的任何地方,都可以成功打印,不显示右键菜单:
这个方法应用在onselectstart事件也仍然有效。不明白为何针对oncontextmenu前两种方法行不通。后来我觉得问题应该是出在body身上,为什么前两种方法中点击别的地方无效而单单是点击文字的时候有效呢?文字肯定包含在body中,那么其他空白的地方是不是就没有包含在body中呢?默认的body是不是有什么不可告人的秘密呢?于是我尝试给body固定了尺寸,像这样:
在JavaScript中处理鼠标事件oncontextmenu(禁用右键菜单)和onselectstart(禁止文本复制)时遇到问题。通常直接在标签上添加事件可以生效,但在body元素上,oncontextmenu事件只在文字部分起作用,而在空白区域不起作用。通过js动态添加事件处理程序并固定body尺寸,解决了这个问题,确保两种事件在body的所有区域都能正常工作。





1万+

被折叠的 条评论
为什么被折叠?



