使img不要在html中移动答案

【问题标题】：Make img not to move in html使img不要在html中移动
【发布时间】：2012-10-26 19:59:55
【问题描述】：

我的页面上有一张图片，我想在鼠标按下时监听 onmousemove 事件。但我不能，因为在我的浏览器（Firefox）中，当我拖动图像时，实际上我拖动了我不想要的图像。

这是我的代码：

JavaScript 部分：

document.onmousemove=getMouseCoordinates;

var x;
var y;
var clicked = false;

function getMouseCoordinates(event){
    ev = event || window.event;
    x = ev.pageX;
    y = ev.pageY;
}

    function onClickMap(){  
        var obj = document.getElementById("selectArea");
        var tempX = x;
        var tempY = y;

    obj.style.left = tempX + "px";
    obj.style.top  = tempY + "px";

    clicked = true;
}

function onMoveMap(){
    if(clicked){
        var obj = document.getElementById("selectArea");
        var xToSize = Math.abs(parseInt(obj.style.left) - x);
        var yToSize = Math.abs(parseInt(obj.style.top)  - y);
        obj.style.width  = xToSize + "px";
        obj.style.height = yToSize + "px";
    }
}

HTML 部分：

<img src="pixels.png" id ="pixelDiv" usemap="#pixelMap" onClick="onClickMap()" onmousemove="onMoveMap()">

【问题讨论】：

您不希望您的图像被拖动？
你可以使用 CSS -webkit-user-drag:none; 但它只支持 webkit atm。

标签： javascript html onclick onmousemove

【解决方案1】：

这是一个 jQuery 解决方案。

这将禁用所有拖动：

$(document).bind("dragstart", function() {
     return false;
});

如果您只想在 img 元素上禁用拖动：

$(document).bind("dragstart", function(e) {
     if (e.target.nodeName.toUpperCase() == "IMG") {
         return false;
     }
});

【讨论】：

【解决方案2】：

您可以添加只返回 false 的 mousedown 处理程序。这似乎停止了 FF 的拖拽。

【讨论】：

【解决方案3】：

好的，这很好，但我想它是特定于 firefox 的，现在我禁用了图像的 onlcick 和 onmove 方法，但我仍然可以拖动图像

现在我找到了解决方案，我正在寻找这个

http://www.develobert.info/2008/10/disable-firefox-image-drag.html

【讨论】：