我正在编写一个小编辑器,我希望能够右键单击图像,然后对其执行某些操作。
我有自定义右键菜单,但我不知道如何告诉jQuery我点击了哪个项目。
jsFiddle - > 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();
});
答案 0 :(得分:0)
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