3

我正在尝试编写一个网络应用程序，用我自己的自定义菜单替换上下文菜单（右键菜单）。我想要这样当用户点击表格行时，他们会得到一个特定的上下文菜单，而当他们点击页面的背景时，他们会得到一个不同的菜单。

我已经编写了菜单并让它们正常工作。当试图弄清楚如何让背景的菜单仅在单击背景时显示以及如何让表格行的菜单在单击时显示时，问题就出现了。

我尝试使用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();
    };
}
4

3 回答 3

2

您可以捕获目标元素，例如：

$('*').click(function(e) {
    alert(e.target);
    alert(e.target.tagName);
    if(e.target.tagName == 'html') {
        // show background menu
    }
});
于 2009-11-03T14:27:02.217 回答
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;
}

这应该处理每个浏览器处理事件的方式。

于 2009-11-03T14:47:40.460 回答
1 

$( 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>

于 2017-06-12T15:16:07.453 回答