3

コンテキストメニュー（右クリックメニュー）を自分でカスタマイズしたものに置き換えるWebアプリを作成しようとしています。ユーザーがテーブルの行をクリックすると、特定のコンテキストメニューが表示され、ページの背景をクリックすると、別のコンテキストメニューが表示されるようにしたいと思います。

私はすでにメニューを書き、それらを機能させました。問題は、背景をクリックしたときにのみ背景のメニューを表示する方法と、それがクリックされたときにテーブル行のメニューを表示する方法を理解しようとするときに発生します。

本文にを使用して各テーブル行document.body.oncontextmenuの関数を設定しようとしましたが、本文の関数が行の関数をオーバーライドするため、間違ったメニューが表示されます。本体のメニューの使用をやめると、テーブル行のメニューが機能するので、それは問題ではありません。oncontextmenuoncontextmenu

間違ったイベントを使用している可能性があるので、背景だけに別のイベントがありますか（背景の上の要素ではありません）？または、テーブル行の関数が優先されるようにイベントに「優先順位を付ける」方法はありますか？

コードは次のようになります。

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 に答える