كيفية الحصول على حدث JavaScript لإطلاق النار فقط عند النقر فوق الخلفية (وليس عناصر أخرى)؟

Question

أحاول كتابة تطبيق ويب يحل محل قائمة السياق (انقر بزر الماوس الأيمن فوق قائمة) بأخرى مخصصة. أريد ذلك حتى عند النقر فوق المستخدم على صف جدول، يحصلون على قائمة سياق معينة ومتى ينقرون على خلفية الصفحة، يحصلون على واحدة مختلفة.

لقد كتبت بالفعل القوائم وحصلت عليها. تأتي المشكلة عند محاولة معرفة كيفية الحصول على قائمة الخلفية لإظهارها فقط عند النقر على الخلفية وكيفية الحصول على قائمة جدول جدول الجدول لإظهار متى يتم النقر فوق ذلك.

حاولت استخدام Document.body.oncontextmenu من أجل الجسم وإعداد وظيفة 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

عليك أن تعمل مع نموذج انتشار حدث جافا سكريبت. ما يحدث هو أن حدث النقر الخاص بك يتم تلقائيا تلقائيا لأسفل طبقات الكائنات على صفحة تم تسجيلها كمستمعين في الأحداث، إلا إذا أخبرته صراحة بالتوقف، جرب شيئا مثل هذا:

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>