배경을 클릭 할 때만 (다른 요소가 아님) JavaScript 이벤트를 발사하는 방법은 무엇입니까?

Question

컨텍스트 메뉴 (마우스 오른쪽 버튼 클릭 메뉴)를 내 맞춤형 메뉴로 대체하는 웹 앱을 작성하려고합니다. 사용자가 테이블 행을 클릭하면 특정 상황에 맞는 메뉴를 얻고 페이지의 배경을 클릭하면 다른 메뉴를 가져 오기를 원합니다.

나는 이미 메뉴를 작성하고 그들을 일하게했다. 배경을 클릭 할 때만 배경 메뉴를 표시하는 방법과 클릭 할 때 테이블 행 메뉴를 가져 오는 방법을 알아내는 방법을 알아 내려고 할 때 문제가 발생합니다.

본문에 olobod.body.ontextmenu를 사용하고 각 테이블 행에 OnContextMenu 함수를 설정했지만 본문의 OnContextMenu 함수는 행을 무시하여 잘못된 메뉴를 얻습니다. 몸의 메뉴 사용을 중단하면 테이블 행 메뉴가 작동하므로 문제가되지 않습니다.

잘못된 이벤트를 사용할 수 있으므로 배경에 대한 다른 이벤트가 있습니까 (배경 위에있는 요소가 아님)? 아니면 이벤트를 "우선 순위를 정하는"방법으로 테이블 행의 함수가 우선 순위가 있습니까? 감사!

이것이 코드의 모습입니다.

var tableMenu;
var bodyMenu;

window.onload = function()
{
    bodyMenu = new rightClickMenu("bodyMenu");
    document.body.oncontextmenu = function() { bodyMenu.show(); tableMenu.hide(); }
    bodyMenu.add("Add Entry", function()
    {
        alert("ADD");
    });

    tableMenu = new rightClickMenu("tableMenu", "tblSims");

    simRows = getElementsByClassName("trSimRow");
    for (var i in simRows)
        simRows[i].oncontextmenu = function() { tableMenu.show(this.id.substring(2)); bodyMenu.hide(); }

    tableMenu.add("Delete Entry", function(mac)
    {
        alert("DELETE");
    });

    document.body.onclick = function()
    {
        bodyMenu.hide();
        tableMenu.hide();
    };
}

Answer 1

JavaScript 이벤트 전파 모델로 작업해야합니다. 클릭 이벤트는 이벤트 리스너로 등록 된 페이지의 객체 레이어를 자동으로 전달하는 것입니다.

function setupClickHandlers()
{
    document.getElementsByTagName('body')[0].onclick = doBodyMenu;
    document.getElementById('tableID').onclick = doTableMenu;
}

function doBodyMenu()
{
    //do whatever it does
}

function doTableMenu(e)
{
    //do whatever it does

    //stop the event propagating to the body element
    var evt = e ? e : window.event;

    if (evt.stopPropagation) {evt.stopPropagation();}
    else {evt.cancelBubble=true;}
    return false;
}

이는 각 브라우저가 이벤트를 처리하는 방식을 처리해야합니다.

Answer 2

대상 요소를 캡처 할 수 있습니다.

$('*').click(function(e) {
    alert(e.target);
    alert(e.target.tagName);
    if(e.target.tagName == 'html') {
        // show background menu
    }
});

Answer 3

$( document ).ready(function() {

    var childClicked = false;
    
    // myContainer is the nearest container div to the clickable elements 
    $("#myContainer").children().click(function(e) {
        console.log('in element');
        childClicked = true;
    });

    $("#myContainer").click(function(e){
        if(!childClicked) {
            console.log('in background');
            e.preventDefault();
            e.stopPropagation();
        }
        childClicked = false;
    });
});

#myContainer {
width:200px;
height:200px;
background-color: red;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="myContainer" style="">

<a href="#">link</a>

<div style="width:50px;height:50px;background-color: white;">
<a href="#">another link</a>
</div>

</div>