контекстное меню jQuery-поиск того, какой элемент вызвал его

Я пытаюсь написать опцию контекстного меню для моей страницы. В основном div щелкнул правой кнопкой мыши, появляется меню опций, которое можно использовать для выполнения задач.

моя проблема заключается в попытке найти исходный элемент, который вызвал все (т. е. div, который был щелкнут Правой Кнопкой Мыши).

мой код jQuery более или менее:

//this is what displays the context menu
$('.outfeedPosition').bind("contextmenu", function (e) {
    $('#contextMenu').css({
        top: e.pageY + 'px',
        left: e.pageX + 'px'
    }).show();

    //'this' is the element which was clicked by the user.
    alert($(this).attr('id'));

    return false;
});



//this is the contextMenu's button handler.
$('#ctxDelete').click(function () {
    alert('delete was clicked, but i dont know by which element - so I dont know which one to delete');
});


<div id="contextMenu">
    <ul>
        <li><a id="ctxInsert" href="#">Insert</a></li>
        <li><a id="ctxEdit" href="#">Edit</a></li>
        <li><a id="ctxDelete" href="#">Delete</a></li>
    </ul>
</div>

-- Итак, я вижу, какой элемент создал событие, когда происходит начальный щелчок правой кнопкой мыши. Но не тогда, когда пункт меню нажатый.

Я работал над чем-то вместе, записывая элемент в скрытое текстовое поле при щелчке правой кнопкой мыши, затем читая его при нажатии одной из опций, а затем удаляя его, когда меню закрывается. Не похоже на идеальный подход, хотя - и я чувствую, что мне не хватает чего-то основного.

надеюсь, вы видите, что я пытаюсь сделать. Я могу опубликовать более полный пример по запросу.

8
contextmenu css html jquery

3 ответов

вы можете рассмотреть возможность использования jQuery хранилище данных методы.

в вашем коде контекстного меню вы можете поставить:

$('.outfeedPosition').bind("contextmenu", function (e) {
    $('#contextMenu').css({
        top: e.pageY + 'px',
        left: e.pageX + 'px'
    }).show();

    //Store the item that was clicked 
    $("#contextMenu").data('originalElement', this);

    return false;
});

затем, когда вы хотите ссылаться на элемент, который инициировал щелчок, вы можете просто сделать это:

$('#ctxDelete').click(function () {
    var originalElement = $("#contextMenu").data('originalElement');
    alert('delete was clicked by ' + originalElement.id );
});

и поставить originalElement в функции jQuery $() для доступа к благости jQuery. Не имеет значения, куда вы помещаете данные, так как любой элемент DOM может иметь связанные с ним данные. Вы можете хранить что-нибудь - в пример кода выше, я храню HTMLElement raw (не jQueryified), но вы также можете сохранить это, если хотите.

см. здесь для небольшого примера:http://www.jsfiddle.net/jonathon/sTJ6M/

6

Я добавляю скрытое поле, а затем нахожу его на основе щелчка, например:

<div class="myItem">
    <div id="contextMenu">
        <ul>
            <li><a id="ctxInsert" href="#">Insert</a></li>
            <li><a id="ctxEdit" href="#">Edit</a></li>
            <li><a id="ctxDelete" href="#">Delete</a></li>
        </ul>
    </div>
    <input type="hidden" class="myID" value="1">
</div>

затем с JQuery

$('#ctxDelete').click(function () {
    var id = $(this).closest('.myItem').find('.myID').val();   
    alert('delete was clicked, by element with ID = ' + id);
});
2

Я немного опаздываю на вечеринку здесь, но я обнаружил, что при создании контекстного меню активный элемент получает класс "контекстное меню-active", добавленный к нему. Это может быть только в более поздних версиях. Я использую контекстное меню 1.6.6.

просто добавить:

var originalElement = $('.context-menu-active');

в обработчик контекстного меню. Здесь он сочетается с примером кода.

$(function(e){
    $.contextMenu({
        selector: '.context-menu-one',
        callback: function(key, options) {
            var originalElement = $('.context-menu-active');
            var m = "clicked: " + originalElement[0].innerHTML;
            window.console && console.log(m);
        },
        items: {
            "edit": {name: "Edit"},
            "cut": {name: "Cut"},
            "copy": {name: "Copy"},
            "paste": {name: "Paste"},
            "delete": {name: "Delete"},
            "sep1": "---------",
            "quit": {name: "Quit"}
        }
    });

    $('.context-menu-one').on('click', function(e){
       console.log('clicked', this);
    })
});
2