Question

我正在编写一个小编辑器，我希望能够右键单击图像，然后对其执行某些操作。

我有自定义右键菜单，但我不知道如何告诉jQuery我点击了哪个项目。

jsFiddle - ＆gt; http://jsfiddle.net/kthornbloom/YsW8D/1/

代码：

// Make the menu
$('.something img').bind("contextmenu", function(event) { 
    event.preventDefault();
    $("div.custom-menu").hide();
    $('<div class="custom-menu"><a href="#" class="fr">Float Right</a></div>')
        .appendTo("body")
        .css({top: event.pageY + "px", left: event.pageX + "px"});
});
// Remove the menu
$(document).bind("click", function(event) {
    $("div.custom-menu").hide();
    event.preventDefault();
});

// Apply option to image you right-clicked on
$(document.body).on("click", ".run", function (event) {
    // this won't work, but is what I want to happen.
    $(this).nearest('img').addClass('float-right');
    event.preventDefault();
});

Answer 1

处理程序方法中的

this引用事件处理程序

所针对的元素

$('.something img').bind("contextmenu", function(event) { 
    event.preventDefault();

    //this refers to the clicked element
    console.log(this)
    $("div.custom-menu").hide();
    $('<div class="custom-menu"><a href="#" class="fr">Float Right</a></div>')
        .appendTo("body")
        .css({top: event.pageY + "px", left: event.pageX + "px"});
});

演示：Fiddle 由于您想知道上下文菜单处理程序中的目标元素，我建议您保存单击的元素引用以供将来参考。 jQuery使用.data()

提供了一个很好的选择

UPDATE

// Make the menu
$('.something img').bind("contextmenu", function (event) {
    event.preventDefault();
    $("div.custom-menu").remove();
    $('<div class="custom-menu"><a href="#" class="fr">Float Right</a></div>')
        .appendTo("body")
        .css({
        top: event.pageY + "px",
        left: event.pageX + "px"
    }).data('target', this);
});
// Remove the menu
$(document).bind("click", function (event) {
    $("div.custom-menu").remove();
    event.preventDefault();
});

// Apply option to image you right-clicked on
$(document.body).on("click", ".fr", function (event) {
    var $target = $($(this).closest('.custom-menu').data('target'));
    $target.addClass('float-right');
    event.preventDefault();
});

演示：Fiddle

通过自定义jQuery下拉列表将类应用于img

1 个答案: