Javascript 获取鼠标运动的图像坐标

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

我需要捕捉这些开始和结束坐标

我尝试了mouseup和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;
}

你可以用这个

<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>

jQuery（函数（$）{
$（'#target'）.Jcrop({
onChange:showCoords，
onSelect:showCoords
});
});
//简单事件处理程序，从onChange和onSelect调用
//事件处理程序，根据上面的Jcrop调用
函数showCoords（c）
{
警报（'x='+c.x+'y='+c.y+'x2='+c.x2+'y2='+x.y2）
警报（'w='+c.w+'h='+c.h）
};

您可以使用

<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>

jQuery（函数（$）{
$（'#target'）.Jcrop({
onChange:showCoords，
onSelect:showCoords
});
});
//简单事件处理程序，从onChange和onSelect调用
//事件处理程序，根据上面的Jcrop调用
函数showCoords（c）
{
警报（'x='+c.x+'y='+c.y+'x2='+c.x2+'y2='+x.y2）
警报（'w='+c.w+'h='+c.h）
};

---

我建议您这样做：

$(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”中，您可以调用回调..

我建议您执行以下操作：

$(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”中，您可以使用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");
     });
});

$（文档）.ready（函数（e）{
$（“div”）.html（“单击我”）；
$（“.box”）.bind（“mousemove”，函数（e）{
$（“div”）.html（“X=“+e.pageX+”px“+”
“+”Y=“+e.pageY+”px”）；
});
});

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

$（文档）.ready（函数（e）{
$（“div”）.html（“单击我”）；
$（“.box”）.bind（“mousemove”，函数（e）{
$（“div”）.html（“X=“+e.pageX+”px“+”
“+”Y=“+e.pageY+”px”）；
});
});

我希望这就是您想要的

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;

var elem=document.getElementById（'result'）；
var startPosX=0，startPosY=0，endPosX=0，endPosY=0；
功能启动程序（e）{
var eve=（e）？e:window.event；
变量x=（eve.layerX）？eve.layerX:eve.offsetX；
变量y=（eve.layerX）？eve.layerY:eve.offsetY；
startPosX=x，startPosY=y；
}
函数endPos（e）{
var eve=（e）？e:window.event；
变量x=（eve.layerX）？eve.layerX:eve.offsetX；
变量y=（eve.layerX）？eve.layerY:eve.offsetY；
endPosX=x，endPosY=y；
elem.innerHTML='startPos（X）='+startPosX+'| startPos（Y）='+startPosY+'
endPos（X）='+endPosX+'| endPos（Y）='+endPosY；
}
document.onmousedown=startPos；
document.onmouseup=endPos；

---

我希望这就是你想要的

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;

var elem=document.getElementById（'result'）；
var startPosX=0，startPosY=0，endPosX=0，endPosY=0；
功能启动程序（e）{
var eve=（e）？e:window.event；
变量x=（eve.layerX）？eve.layerX:eve.offsetX；
变量y=（eve.layerX）？eve.layerY:eve.offsetY；
startPosX=x，startPosY=y；
}
函数endPos（e）{
var eve=（e）？e:window.event；
变量x=（eve.layerX）？eve.layerX:eve.offsetX；
变量y=（eve.layerX）？eve.layerY:eve.offsetY；
endPosX=x，endPosY=y；
elem.innerHTML='startPos（X）='+startPosX+'| startPos（Y）='+startPosY+'
endPos（X）='+endPosX+'| endPos（Y）='+endPosY；
}
document.onmousedown=startPos；
document.onmouseup=endPos；

---

请先显示一些代码。请包括您的代码。如果没有代码，所有答案都有偏差没有警报，没有控制台。日志。。。请描述“显示任何内容”。这是通过以下方式解决的。请先显示一些代码。请包括您的代码。没有代码，所有答案都是错误的没有警报，没有控制台。日志。。。请描述“显示任何内容”。它是通过简单javascript中的任何其他方式来解决的？抱歉，我不知道。但这是更好的方法，在简单javascript中的任何其他方式？抱歉，我不知道。但这是更好的方法