Come arrivare javascript evento al fuoco solo quando il fondo si fa clic (e non di altri elementi)?

Question

Sto cercando di scrivere una web app che sostituisce il menu contestuale (tasto destro del mouse) con i miei quelli personalizzati. Lo voglio in modo che quando l'utente fa clic su una riga della tabella, che ricevono una certa menu contestuale e quando fanno clic sullo sfondo della pagina, ottengono uno diverso.

ho già scritto i menu e ottenuto lavorando. Il problema arriva quando si cerca di capire come ottenere il menu del background per mostrare solo quando si fa clic sullo sfondo e come ottenere il menu della riga della tabella per dimostrare quando questo viene cliccato.

Ho provato ad utilizzare document.body.oncontextmenu per il corpo e la funzione e l'impostazione oncontextmenu per ogni riga della tabella, ma la funzione oncontextmenu del corpo le sostituzioni della riga in modo da ottenere il menu sbagliato. Il menu per le righe della tabella funziona se mi fermo utilizzando il menu del corpo, in modo che non è il problema.

Potrei essere utilizzando gli eventi sbagliate, così c'è un evento diverso solo per lo sfondo (e non gli elementi in cima al fondo)? O un modo per "priorità" gli eventi in modo la funzione della riga della tabella ha la precedenza? Grazie!

In questo modo il codice è:

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

Si deve lavorare con il modello JavaScript evento di propagazione. Quello che succede è che il vostro evento click viene passata automaticamente gli strati di oggetti su una pagina che sono stati registrati come listener di eventi, a meno che esplicitamente dice di fermarsi, provare qualcosa di simile:

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;
}

Questo dovrebbe trattare con il modo in cui ogni browser gestisce gli eventi.

Answer 2

È possibile catturare l'elemento di destinazione, per esempio:.

$('*').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>