javascript - 获取鼠标移动的图像坐标

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>

看这里

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;

在线演示在这里

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");
     });
});