Question

我有一种情况，我在图像上的某个位置（比如x1，y1）点击（鼠标按下）并移动鼠标并在其中的某个其他位置（x2，y2）释放鼠标（鼠标向上）图片。

我需要捕捉这些起点和终点坐标。

我尝试使用mouseup和mousedown事件，但它无法正常工作。当我在目的地做mousedown时，它不返回任何东西。

var startX, startY;
var endX, endY;
if (!document.all)
    document.captureEvents(Event.MOUSEUP);
document.onmouseup = endPos;

if (!document.all)
    document.captureEvents(Event.MOUSEDOWN);
document.onmousedown = startPos;

function startPos (event)
{
   startX = event.offsetX?(event.offsetX):event.pageX - img1.offsetLeft;
   startY = event.offsetY?(event.offsetY):event.pageY - img1.offsetTop;
}

function endPos (event)
{
   endX = event.offsetX?(event.offsetX):event.pageX - img1.offsetLeft;
   endY = event.offsetY?(event.offsetY):event.pageY - img1.offsetTop;
}

Answer 1

您可以使用jCrop来获取此

<script type="text/javascript">

jQuery(function($){

  $('#target').Jcrop({
    onChange:   showCoords,
    onSelect:   showCoords
  });

});

// Simple event handler, called from onChange and onSelect
// event handlers, as per the Jcrop invocation above
function showCoords(c)
{
  alert('x='+ c.x +' y='+ c.y +' x2='+ c.x2 +' y2='+ x.y2)
  alert('w='+c.w +' h='+ c.h)
};

</script>

SEE HERE

Answer 2

我希望这就是你想要的。

<强> HTML：

<div id="result"></div>

<强>的Javascript

var elem = document.getElementById('result');
var startPosX = 0, startPosY = 0, endPosX = 0, endPosY = 0;
function startPos(e) {
   var eve = (e) ? e : window.event;
   var x = (eve.layerX) ? eve.layerX : eve.offsetX;
   var y = (eve.layerX) ? eve.layerY : eve.offsetY;
   startPosX = x, startPosY = y;
}
function endPos(e) {
   var eve = (e) ? e : window.event;
   var x = (eve.layerX) ? eve.layerX : eve.offsetX;
   var y = (eve.layerX) ? eve.layerY : eve.offsetY;
   endPosX = x, endPosY = y;
elem.innerHTML = 'startPos(X)= ' + startPosX + ' | startPos(Y)= ' + startPosY + '<br/> endPos(X)= ' + endPosX + ' | endPos(Y)= ' + endPosY;
}

document.onmousedown = startPos;
document.onmouseup = endPos;

Online demo Here

Answer 3

我建议你做这样的事情：

$(function(){

var positionRequester = function(element, callback){
        var startX = 0,
            startY = 0,
            endX = 0,
            endY = 0;

       $(element).unbind("mousedown").on("mousedown",function(e){
            console.log(e);
       });

        $(element).unbind("mouseup").on("mouseup",function(e){
            callback(startX,startY,endX,endY);
        });

};

positionRequester("div",function(startX,startY,endX,endY){
    console.log(startX,startY,endX,endY);
})

}）;

在“mousedown”你可以捕捉到起点，在“mouseup”你可以调用回调..

Answer 4

使用JQuery：

$(document).ready(function(e) {
     $("div").html("CLICK ME");
     $(".box").bind("mousemove",function(e ){
         $("div").html("X="+e.pageX +"px"+'<br/>' +"Y ="+e.pageY +"px");
     });
});

获取鼠标移动的图像坐标

4 个答案: