最近发生一件挺有意思的事情——同事给我一个网址,说为什么页面中的文字和图片为什么不能选中,看他着急用页面里面的内容写文档加上我的好奇心。就帮忙看了看。
一、什么情况
拿到页面的第一反应是页面中是不是有什么属性(后来发现不是),不管怎样打开调试工具看看吧。这是我遇到了一个问题,右键无效,看来问题不是我想的那么简单。观察一下页面是全局不能右键,全局不能选中。那问题多半发生在最外层的标签上。打开一看,见下图,真相浮出水面了。
二、神马问题
注意body标签中的 oncontextmenu 和 onselectstart 这两个事件函数 都是 event.returnValue=false。猜想这应该是让这两个事件无效的意思。那么这两个事件函数之前是干什么的。查了一下oncontextmenu 是上下文菜单(右键)的事件回调;onselectstart是选中开始的时间回调。这也解释了为什么我的右键不好使,又选不了内容了。
三、怎么解决
现在的这两个回调函数都被定义成无效了。我们就要让他有效——重写函数。在控制台(console)输入如下代码
1 document.getElementsByTagName('body')[0].oncontextmenu = function(){window.event.returnValue=true;} 2 3 document.getElementsByTagName('body')[0].onselectstart = function(){window.event.returnValue=true;}
改成true了,回车运行看看。页面的内容可以选中了,右键也好使了。
四、有高级点的方法吗?
同事说每次都输入代码到控制台,他又不是开发人员,怕搞不定,还要每次找我。我看他的浏览器也是chrome,我提供了这样一个方案。
在 chrome->F12->sources->snippets中新建一个snippet(右键 -》 new)。保存上面的代码段,需要的时候run一下这个snippet 就好了。如下:
通过这次,我深深感到,自己不知道的东西太多太多了!