防止图像拖动选择

时间:2012-11-21 13:05:15

标签: javascript image select drag

我已经浏览了整个互联网,但发现没有任何效果。

我希望我的图像不被选中,就像带有背景图像的div(<div style = "background-image : 'moo.png';"> </div>

我不能使用背景图像,因为我需要一个图像映射来实现功能。

我的代码如下:

的CSS,

.filmmakers #map {

-moz-user-select : -moz-none;
-khtml-user-select : none;
-webkit-user-select : none;
-ms-user-select : none;
-o-user-select : none;
user-select : none;

}

.filmmakers #map::selection {

   color : rgba(0, 0, 0, 0);

}

HTML,

<img id = "map" src = "WorldMap.png" alt = "Map" unselectable = "on" style = "left : 0px; top : 0px;" />

的javascript,

var map = document.getElementById('map');

makeUnselectable(map);

function makeUnselectable(node) {

if (node.nodeType == 1) {

   node.setAttribute("unselectable", "on");

}

   var child = node.firstChild;

while (child) {

   makeUnselectable(child);
   child = child.nextSibling;

}

}

正如你所看到的,我仍然得到了拖动图标,它与地图的功能相混淆:

https://dl.dropbox.com/u/107533178/CampusRoyal/Filmmakers.html

请帮忙,感谢您花时间阅读我的帖子,非常感谢您的关注。

干杯!

Mithos

2 个答案:

答案 0 :(得分:11)

你需要:

window.ondragstart = function() { return false; } 

如果您使用的是jQuery

$("img").mousedown(function(){
    return false;
});

答案 1 :(得分:-1)

在这里回答:https://stackoverflow.com/a/11135622/1722914

使用此css:

-moz-user-select: none;
-webkit-user-select: none;
user-select: none;