컨텍스트 메뉴의 위치 지정

Question

나는 자바 스크립트에서 오른쪽 클릭 컨텍스트 메뉴를 개발했습니다. 컨텍스트 메뉴의 위치는 테이블의 모든 행에 대한 커서의 아래쪽에 있습니다. 테이블의 마지막 행은 지금 페이지의 끝에 있습니다. 행을 클릭하면 오른쪽에있는 컨텍스트 메뉴가 내려오고 있지만

여기 cursor.Any 도움을 주시기 바랍니다

function ContextShow(event) { 

event = event || window.event; 

var m = getMousePosition(event); 
var s = getScrollPosition(event); 
var client_height = document.body.clientHeight; 
var display_context = document.getElementById('context_menu'); 

if(replaceContext){ 

     display_context.style.display = "block"; 
     display_context.style.left = m.x + s.x + "px"; 
     display_context.style.top = m.y + s.y + "px"; 

     replaceContext = false; 
    }} 


function getMousePosition (e){ 
e = e || window.event; 
var position = { 
    'x' : e.clientX, 
    'y' : e.clientY 
} 
return position;} 



function getScrollPosition(){ 
var x = 0; 
var y = 0; 

if(typeof(window.pageYOffset) == 'number') { 
    x = window.pageXOffset; 
    y = window.pageYOffset; 
} else if(document.documentElement && (document.documentElement.scrollLeft || document.documentElement.scrollTop)) { 
    x = document.documentElement.scrollLeft; 
    y = document.documentElement.scrollTop; 
} else if(document.body && (document.body.scrollLeft || document.body.scrollTop)) { 
    x = document.body.scrollLeft; 
    y = document.body.scrollTop; 
} 

var position = { 
    'x' : x, 
    'y' : y 
} 

return position; 

}에 표시되어야의 contextShow가에 따라 마우스 오른쪽 버튼으로 클릭의 상황에 맞는 메뉴를 표시합니다 getMousePosition (event)를 사용한 마우스 위치; 및 getScrollPosition (이벤트);

Answer 1

컨텍스트 메뉴를 표시 할 때 마우스 커서가 화면의 아래쪽 절반 또는 위쪽 절반에 있는지 확인해야합니다. 그러면 아래쪽 절반 인 경우 마우스 커서를 커서의 위쪽에 표시해야하며 그 반대의 경우도 마찬가지입니다. 화면의 오른쪽과 왼쪽 절반에도 적용 할 수 있습니다. 그러면 커서가 화면의 1/4에 따라 메뉴가 나타납니다. 이렇게하면 커서가있는 곳의 메뉴가 표시되지 않습니다. .

예 : 마우스 X 좌표 경우> 커서의 상단에 표시 메뉴보다 화면 높이/2 ...

Answer 2

내가 컨텍스트 메뉴의 위치를 ​​설정하기 위해 다음과 같은 기능을 사용하고 나를 위해 작동합니다.

function setContextMenuPostion(event, contextMenu) { 

    var mousePosition = {}; 
    var menuPostion = {}; 
    var menuDimension = {}; 

    menuDimension.x = contextMenu.outerWidth(); 
    menuDimension.y = contextMenu.outerHeight(); 
    mousePosition.x = event.pageX; 
    mousePosition.y = event.pageY; 

    if (mousePosition.x + menuDimension.x > $(window).width() + $(window).scrollLeft()) { 
     menuPostion.x = mousePosition.x - menuDimension.x; 
    } else { 
     menuPostion.x = mousePosition.x; 
    } 

    if (mousePosition.y + menuDimension.y > $(window).height() + $(window).scrollTop()) { 
     menuPostion.y = mousePosition.y - menuDimension.y; 
    } else { 
     menuPostion.y = mousePosition.y; 
    } 

    return menuPostion; 
}