经测试目前以下代码均可在各大常见浏览器中正常使用
代码仅作页面优化作用,解决普通用户的操作行为
页面常用设置
设为首页
html上面图片拖动的时候会在一个新窗口打开。html上面图片拖动的时候会在一个新窗口打开。
oncontextmenu="return false"
加入收藏
html上面图片拖动的时候会在一个新窗口打开。html上面图片拖动的时候会在一个新窗口打开。
oncontextmenu="return false"
页面常用禁止项
禁止鼠标右键
当网页中的某些功能与浏览器自带右键功能发生冲突时,则可以通过不同的方式对页面进行优化。
方式一:可以通过给标签添加 oncontextmenu 属性来禁止鼠标右键。
<body oncontextmenu="return false"></body>
方式二:可以通过在<body>底部添加JS代码来禁止鼠标右键。
<script type="text/javascript">
document.oncontextmenu = function() { return false; };
</script>
禁止拖拽图片
当网页中图片的数量较多时,导致发生误触的概率增大,给用户带来不必要的不良体验,则可以通过不同的方式对页面进行优化。
方式一:可以通过给标签添加 ondragstart 属性来禁止拖拽图片。
<body ondragstart="return false"></body>
方式二:可以通过在<body>底部添加JS代码来禁止拖拽图片。
<script type="text/javascript">
let im = document.getElementsByTagName('img');
for(i in im)im[i].onmousedown = function() { return false; };
</script>
禁止复制文本
当页面中某些内容不想被用户复制,但又不想影响选中时,则可以通过不同的方式对页面进行优化,使右键复制和 Ctrl+C 失效(名存实亡)
方式一:给标签添加 oncopy 属性来禁止复制文本。
<body oncopy="return false"></body>
方式二:可以通过在<body>底部添加JS代码来禁止复制文本。
<script type="text/javascript">
document.oncopy = function() { return false; };
</script>
禁止剪切文本
当页面中某些内容不想被用户剪切,但又不想影响选中时,则可以通过不同的方式对页面进行优化,使右键剪切和 Ctrl+X 失效(名存实亡)
方式一:给标签添加 oncut 属性来禁止复制文本。
<body oncut="return false"></body>
方式二:可以通过在<body>底部添加JS代码来禁止复制文本。
<script type="text/javascript">
document.oncut = function() { return false; };
</script>
禁止粘贴文本
当用户操作输入框时,不想让用户以粘贴的形式输入信息,则可以通过不同的方式对页面进行优化,使右键粘贴和 Ctrl+V 失效(名存实亡)
方式一:给标签添加 onpaste 属性来禁止复制文本。
<body onpaste="return false"></body>
方式二:可以通过在<body>底部添加JS代码来禁止粘贴文本。
<script type="text/javascript">
document.onpaste = function() { return false; };
</script>
禁止选中内容
当页面中的某些内容不想被用户选中时,则可以通过不同的方式对页面进行优化。
方式一:给标签添加 onselectstart 属性来禁止选中内容。
<body onselectstart="return false"></body>
方式二:可以通过在CSS中添加 onselectstart 属性来禁止选中内容。
<style type="text/css">
*{ -moz-user-select: none; -o-user-select:none; -khtml-user-select:none;
-webkit-user-select:none; -ms-user-select:none; user-select:none; }
</style>
注:该方式可以更加灵活、简便的控制页面中需要禁止和无需禁止的部分
如果页面中的某些部分无需禁止,则将属性值none更换为text,重新写入所需部分的CSS即可
方式三:可以通过在<body>底部添加JS代码来禁止选中内容。
<script type="text/javascript">
document.onselectstart = function() { return false; };
</script>
页面组件自定义
鼠标指针
为了满足一些特殊页面样式的需求,可以通过在CSS中添加 cursor
属性来自定义鼠标指针样式。
<style type="text/css">
body { cursor: url( a1.png ), auto; }
</style>
属性值 | 描述 |
---|---|
url |
需使用的自定义光标的 URL 注释:请在此列表的末端始终定义一种普通的光标,以防没有由 URL 定义的可用光标 |
default | 默认光标(通常是一个箭头) |
auto | 默认。浏览器设置的光标 |
crosshair | 光标呈现为十字线 |
pointer | 光标呈现为指示链接的指针(一只手) |
move | 此光标指示某对象可被移动 |
e-resize | 此光标指示矩形框的边缘可被向右(东)移动 |
ne-resize | 此光标指示矩形框的边缘可被向上及向右移动(北/东) |
nw-resize | 此光标指示矩形框的边缘可被向上及向左移动(北/西) |
n-resize | 此光标指示矩形框的边缘可被向上(北)移动 |
se-resize | 此光标指示矩形框的边缘可被向下及向右移动(南/东) |
sw-resize | 此光标指示矩形框的边缘可被向下及向左移动(南/西) |
s-resize | 此光标指示矩形框的边缘可被向下移动(北/西) |
w-resize | 此光标指示矩形框的边缘可被向左移动(西) |
text | 此光标指示文本 |
wait | 此光标指示程序正忙(通常是一只表或沙漏) |
help | 此光标指示可用的帮助(通常是一个问号或一个气球) |
滚动条样式
html上面图片拖动的时候会在一个新窗口打开。html上面图片拖动的时候会在一个新窗口打开。
oncontextmenu="return false"
搜索引擎优化
SEO
html上面图片拖动的时候会在一个新窗口打开。html上面图片拖动的时候会在一个新窗口打开。
oncontextmenu="return false"