防止图片被拖动选择

Question

我在互联网上搜索了很久，但是没有找到有效的解决方案。

我希望我的图片不会被选中，就像一个带有背景图片的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

- MithosAnnar

Answer 1

你需要：

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

如果你正在使用jQuery。

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

- Gurpreet Singh

---

但现在图片完全无法拖动？ - MithosAnnar

你尝试过这个代码吗？window.ondragstart = function() { return false; } - Gurpreet Singh

我可以看到这个页面上有一个错误：https://dl.dropbox.com/u/107533178/CampusRoyal/Filmmakers.html。修复该错误并尝试JS，应该可以正常工作。 - Gurpreet Singh

我误解了你！非常感谢 ^^ 干杯！并且+1赞赏你快速、有帮助和简单的回答。 - MithosAnnar

Answer 2

在这里回答：https://dev59.com/o2025IYBdhLWcg3weV4s#11135622

使用这个CSS：

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

- iizno