0

画像のある位置 (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;
}
4

4 に答える 4

2

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>

ここを見る

于 2013-05-03T12:49:53.607 に答える
1

これがあなたの望むものになることを願っています。

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;

オンラインデモはこちら

于 2013-05-03T18:05:42.933 に答える
0

次のようなことをお勧めします。

$(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);
})

});

「マウスダウン」では開始点をキャプチャでき、「マウスアップ」ではコールバックを呼び出すことができます..

于 2013-05-03T13:12:56.733 に答える
0

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");
     });
});
于 2013-05-03T17:23:10.570 に答える