[스크랩] 마우스 클릭 위치에 레이어 띄우기

출처 : http://sadtear.tistory.com/6

 

자바스크립트에 많이 약해서 항상 고생이다..
(그렇다고 특별히 특출나게 잘하는 언어도 없다 ㅠ.ㅠ)

내가 클릭한 곳의 좌표를 계산해서 해당 위치에 레이어를 띄울때 사용하며, 나 역시도 여기 저기 검색해서 찾은 것을 활용하던 소스 ...


아래 내용을 전부 재 수정
===============================================================================

<script type="text/javascript">

function abspos(){  // 클릭 이벤트가 발생한 바로 그 위치
       this.x = event.screenX - window.screenLeft - document.body.clientLeft + document.body.scrollLeft  - event.offsetX;
       this.y = event.screenY - window.screenTop - document.body.clientTop + document.body.scrollTop  - event.offsetY;
       return this;
       this.x = event.screenX - window.screenLeft - document.body.leftMargin + document.body.scrollLeft  - event.offsetX;
       this.y = event.screenY - window.screenTop - document.body.topMargin + document.body.scrollTop  - event.offsetY;
       return this;
   }

function itemClick() {
    var d = document.getElementById('lay');
    d.style.display='block';
   
    var elm = event.srcElement.parentElement;
    var pos = abspos();
    var i = parseInt(elm.parentElement.offsetHeight,10);
    var j = parseInt(elm.offsetHeight,10);
    pos.y += 10;
    d.style.left = pos.x  + 10;
    d.style.top = pos.y + 10;
}
</script>

<script type="text/javascript">
function abspos(e){
    this.x = e.clientX + (document.documentElement.scrollLeft?document.documentElement.scrollLeft:document.body.scrollLeft);
    this.y = e.clientY + (document.documentElement.scrollTop?document.documentElement.scrollTop:document.body.scrollTop);
    return this;
}


function itemClick(e){
    var ex_obj = document.getElementById('lay');
    if(!e) e = window.Event;
    pos = abspos(e);
    ex_obj.style.left = pos.x+"px";
    ex_obj.style.top = (pos.y+10)+"px";
    ex_obj.style.display = ex_obj.style.display=='none'?'block':'none';
}
</script>

<div id="lay" style="position:absolute; display:none;">
내용이 어쩌고 저쩌고
</div>
<input type="button" onclick="itemClick(event);" value="클릭">


==================
변경된 특징은
abspos 함수에서는
파폭 + IE 에서 모두 사용가능한 형태로 소스를 수정 하였고
itemclick 함수에서는
우선 위치에 "px" 를 붙여서 파폭에서도 사용가능하게 바꿨으며
if(!e) e = window.Event; 로 파폭에서 이벤트 파라미터를 제대로 못받은 경우 이벤트를 추가해 줌.