html中設定圖片不允許拖拽下載
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;
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. 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: <body onselectstart="return false">
Firefox：，控制css: body { -moz-user-select: none; }
onselectstart幾乎可以用於所有物件，其觸發時間為目標物件被開始選中時（即選中動作剛開始，尚未實質性被選中）。使用示例如下：
<div id="tmp" onselectstart="return false">flondon</div>
<!--或者-->
<div id="tmp">flondon</div>
<script type="text/javascript">
document.getElementById("tmp").onselectstart = function(){return false;};
</script>
<!--或者-->
<div id="tmp">flondon</div>
<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">accc</div>
3.2.5. onselect
onselect` 事件會在文字框（input、textarea）內的文字被選中時發生，其觸發時間是在文字被選擇以後（即文字已經被選擇，已經顯式的表現出來）。該事件只被input和textarea標籤支援。
3.2.6. event
firefox裡的event跟IE裡的不同，IE裡的是全域性變數，隨時可用；firefox裡的要用引數引導才能用，是執行時的臨時變數。event在ff中是臨時變數，這表示可以換成任何其他符號
在IE中可以執行，因為在函式中會有一個內建的event隱藏物件。 但是在Firefox中,則內建event變數為空
<input type="button" onmousemove="showDiv(event);"//event不需要加引號
function showDiv(event)
{
var event=window.event||event;
event.clientX;
event.clientY;
}