html中设置图片不允许拖拽下载
文章目录
- 1. 问题描述
- 2. 问题解决
- 3. 问题总结
- 3.1. `event.returnValue=false`与`event.preventDefault()`
- 3.2. 关于选择/拖放的事件和属性
- 3.2.1. draggable 属性
- 3.2.2. ondragstart
- 3.2.3. oncontextmenu
- 3.2.4. onselectstart
- 3.2.5. onselect
- 3.2.6. event
1. 问题描述
在浏览器中,常见的一种行为就是:选中-拖拽-新页面打开,例如百度搜索就是这样.但是我现在不想让别人在我的个人网页上选中,也不想让他人拖拽我的照片,要怎么做呢?
2. 问题解决
<body ondragstart="window.event.returnValue=false;return false;" oncontextmenu="window.event.returnValue=false;return false;" onselectstart="event.returnValue=false;return false;">
事实上,只设置body的各个事件为window.event.returnValue=false;在chrome下也是可以的,但是在ie下,必须加上后边的return false;
event.returnValue的作用就是：当捕捉到事件(event)时，判断为false，则阻止当前事件继续运行，window.event.returnValue = false;之后的语句将都不会执行。
return false 不是阻止事件继续向顶层元素传播，而是阻止浏览器对事件的默认处理。
3. 问题总结
3.1. event.returnValue=false与event.preventDefault()
event.preventDefault()方法是用于取消事件的默认行为，但此方法并不被ie支持，在ie下需要用window.event.returnValue = false; 来实现。
/**
* 取消事件的默认行为
*/
function stopDefault(e) {
if ( e && e.preventDefault ){
e.preventDefault();
} else {
window.event.returnValue = false;
}
}
处理ie firefox下图片拖动的问题。
document.onmousemove=function(ev){
var oEvent=ev||event;
if(oEvent.preventDefault){
oEvent.preventDefault();
}else{
oEvent.returnValue=false;
}
}
3.2. 关于选择/拖放的事件和属性
在 HTML5 中，拖放是标准的一部分，任何元素都能够拖放。。 更多信息参考: HTML5 拖放。
3.2.1. draggable 属性
draggable 属性规定元素是否可拖动。draggable 属性是 HTML5 新增的。
提示： 链接和图像默认是可拖动的。
提示： draggable 属性经常用于拖放操作。
可拖动的段落：
<p draggable="true">这是一段可移动的段落。请把该段落拖入上面的矩形。p>
3.2.2. ondragstart
定义和用法
ondragstart 事件在用户开始拖动元素或选择的文本时触发。
注意： 为了让元素可拖动，需要使用 HTML5 draggable 属性。
提示： 链接和图片默认是可拖动的，不需要 draggable 属性。
在拖放的过程中会触发以下事件：
- 在拖动目标上触发事件 (源元素):
- ondragstart - 用户开始拖动元素时触发
- ondrag - 元素正在拖动时触发
- ondragend - 用户完成元素拖动后触发
- 释放目标时触发的事件:
- ondragenter - 当被鼠标拖动的对象进入其容器范围内时触发此事件
- ondragover - 当某被拖动的对象在另一对象容器范围内拖动时触发此事件
- ondragleave - 当被鼠标拖动的对象离开其容器范围内时触发此事件
- ondrop - 在一个拖动过程中，释放鼠标键时触发此事件
3.2.3. oncontextmenu
oncontextmenu 事件在元素中用户右击鼠标时触发并打开上下文菜单。
注意：所有浏览器都支持 oncontextmenu 事件， contextmenu 元素只有 Firefox 浏览器支持。
3.2.4. onselectstart
GlobalEventHandlers.onselectstart 表示 selectstart 事件绑定的事件处理器，比如用户在网页上开始选择任意文本内容时触发。在输入控件中选择文本时，触发的是控件绑定的 select 事件。
使用onselectstart，禁止用户选中网页上的内容，IE及Chrome下的方法一样。例如
IE:
Firefox：，控制css: body { -moz-user-select: none; }
onselectstart几乎可以用于所有对象，其触发时间为目标对象被开始选中时（即选中动作刚开始，尚未实质性被选中）。使用示例如下：
<div id="tmp" onselectstart="return false">flondondiv>
<div id="tmp">flondondiv>
<script type="text/javascript">
document.getElementById("tmp").onselectstart = function(){return false;};
script>
<div id="tmp">flondondiv>
<script type="text/javascript">
if(document.addEventListener)
{
document.getElementById("tmp").addEventListener("selectstart", function(){return false;}, false);
}
else
{
document.getElementById("tmp").attachEvent("onselectstart", function(){return false;});
}
script>
注：
onselectstart事件不被input和textarea标签支持，而onselect事件只被input和textarea支持。Firefox/Opera不支持onselectstart事件Firefox中可以使用CSS"-moz-user-select:none"属性来禁止文本选定- webkit浏览器可以使用
-khtml-user-select，当然也可以使用onselectstart事件来阻止用户选定元素内文本，如下:
<div onselectstart="return false">acccdiv>
3.2.5. onselect
onselect` 事件会在文本框（input、textarea）内的文本被选中时发生，其触发时间是在文本被选择以后（即文本已经被选择，已经显式的表现出来）。该事件只被input和textarea标签支持。
3.2.6. event
firefox里的event跟IE里的不同，IE里的是全局变量，随时可用；firefox里的要用参数引导才能用，是运行时的临时变量。event在ff中是临时变量，这表示可以换成任何其他符号
在IE中可以运行，因为在函数中会有一个内置的event隐藏对象。
但是在Firefox中,则内置event变量为空
function showDiv(event)
{
var event=window.event||event;
event.clientX;
event.clientY;
}