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=falseevent.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>

注:

  1. onselectstart事件不被inputtextarea标签支持,而onselect事件只被inputtextarea支持。
  2. Firefox/Opera不支持onselectstart事件Firefox中可以使用CSS "-moz-user-select:none"属性来禁止文本选定
  3. 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;
}

你可能感兴趣的:(javascript)