스크롤 할 수있는 div에서 마우스 위치 가져 오기

Question

또 다른 질문으로 지난 며칠 동안 저를 멀리하고 있습니다. 내 다른 질문에서 보았 듯이 나는 마인드 맵 소프트웨어를 만들고있다. 그래서 (매우 단순하게) 나는 두 개의 div를 가지고있다. 하나는 페이지의 사각형이고 다른 하나는 div의 약 10 배 크기이며 draggable입니다. 이렇게하면 화면에 객체를 놓고 옆으로 약간 움직일 수 있습니다. 다른 객체가 추가되는 등등입니다. 스크롤 할 수있는 외부 div를 만들어서이 작업을 수행합니다.

비록 내가 가지고있는 문제는 자바 스크립트에서 마우스 위치와 관련이 있습니다. 만약 div의 어느 위치에서나 마우스 위치를 얻는다면 내부 div를 위쪽과 왼쪽 크기의 반만큼 오프셋합니다. (따라서 효과적으로 사용자는 캔버스의 중간을보고 좋아하는대로 갈 수 있습니다) . 수십 개의 다른 마우스 좌표 기능을 시도했지만 이들 중 아무 것도 작동하지 않는 것 같습니다. 예를 들어 웹상에서 발견 된 크로스 브라우저가있는 예는 다음과 같습니다.

function getMouse(e) { 
    var posx; 
    var posy; 
    if (!e) var e = window.event; 
    if (e.pageX || e.pageY) { 
    posx = e.pageX; 
    posy = e.pageY; 
    } 
    else if (e.clientX || e.clientY) { 
    posx = e.clientX + document.body.scrollLeft + document.getElementById("canvas").scrollLeft; 
    posy = e.clientY + document.body.scrollTop + document.getElementById("canvas").scrollTop; 
    } 
} //getMouse 

심지어 이렇게해도 작동하지 않습니다. 나는 내부 div가 드래그 가능하기 때문에 오류가 거의 확실하다. 다행히도 나는 설명할만한 의미를 가졌지 만, 내가 가지고있는 상황을 보여주기 위해 here is a very simple jsfiddle을 시도하지 않았다면 (여기서는 마우스 클릭이 없어도 내 div 구조를 보여주기 위해). 제품에서 사용자가 캔버스를 두 번 클릭하면 새 객체가 나타나기 때문에 마우스 좌표가 올바른지 알아야합니다.

나는 누군가가 저를 도울 수 있기를 바랍니다.

미리 감사드립니다.

EDIT : 내 응용 프로그램의 일부로 JQuery를 사용하므로 JQuery를 사용하거나 사용하지 않은 솔루션도 괜찮을 것이라고 언급하는 데 실패했습니다. 다시 한번 감사드립니다.

Answer 1

나는 당신의 문제를 올바르게 이해하기를 바랍니다.

.offset()을 사용하면 루트 문서와 관련된 모든 요소의 현재 오프셋을 확인할 수 있습니다. 그런 다음이 오프셋을 마우스 위치와 비교할 수 있습니다.

event.pageX 및 event.pageY을 사용하여 현재 마우스 위치를 확인할 수 있습니다.

$ {document} .scrollLeft() 및 $ {document}을 사용할 수 있습니다. scrollTop() 현재 스크롤 위치를 결정합니다.

내부 사업부를 기준으로 마우스 위치

다음 나는 이것이 매우 늦게 알고

$("#outer_canvas").mousemove(function(e) { 
    var relativePosition = { 
     left: e.pageX - $(document).scrollLeft() - $('#canvas').offset().left, 
     top : e.pageY - $(document).scrollTop() - $('#canvas').offset().top 
    }; 
    $('#mousepos').html('<p>x: ' + relativePosition.left + ' y: ' + relativePosition.top + ' </p>'); 
}); 

Answer 2

얻을,하지만 난 같은 상황에 자신을 실행하고이 내가 그것을 달려 드는 방법입니다 수 있습니다.

jQuery를 사용하고 싶지 않았으므로 스크롤 오프셋의 문제와 div의 배치를 여러 스크롤 가능한 div에 처리하는 재귀 적 오프셋 함수를 작성했습니다.

function recursive_offset (aobj) { 
var currOffset = { 
    x: 0, 
    y: 0 
} 
var newOffset = { 
    x: 0, 
    y: 0 
}  

if (aobj !== null) { 

    if (aobj.scrollLeft) { 
    currOffset.x = aobj.scrollLeft; 
    } 

    if (aobj.scrollTop) { 
    currOffset.y = aobj.scrollTop; 
    } 

    if (aobj.offsetLeft) { 
    currOffset.x -= aobj.offsetLeft; 
    } 

    if (aobj.offsetTop) { 
    currOffset.y -= aobj.offsetTop; 
    } 

    if (aobj.parentNode !== undefined) { 
     newOffset = recursive_offset(aobj.parentNode); 
    } 

    currOffset.x = currOffset.x + newOffset.x; 
    currOffset.y = currOffset.y + newOffset.y; 
    console.log (aobj.id+' x'+currOffset.x+' y'+currOffset.y); 
} 
return currOffset; 
} 

것은 진짜를 사용 : 나는 당신의 바이올린은 jQuery를 사용하고있는 것으로 나타났습니다

var offsetpos = recursive_offset (this); //or some other element 

    posX = event.clientX+offsetpos.x; 
    posY = event.clientY+offsetpos.y;