Нашел готовое,
// Вешаем слушатель события нажатие кнопок мыши для всего документа:
jQuery('.images').mousedown(function(event) {
// Убираем css класс selected-html-element у абсолютно всех элементов на странице с помощью селектора "*":
jQuery('*').removeClass('selected-html-element');
// Удаляем предыдущие вызванное контекстное меню:
jQuery('.context-menu').remove();
// Проверяем нажата ли именно правая кнопка мыши:
if (event.which === 3) {
// Получаем элемент на котором был совершен клик:
var target = $(event.target);
// Добавляем класс selected-html-element что бы наглядно показать на чем именно мы кликнули (исключительно для тестирования):
target.addClass('selected-html-element');
// Создаем меню:
jQuery('<div/>', {
class: 'context-menu'
// Присваиваем блоку наш css класс контекстного меню:
})
.css({
left: event.pageX+'px',
// Задаем позицию меню на X
top: event.pageY+'px'
// Задаем позицию меню по Y
})
.appendTo('body') // Присоединяем наше меню к body документа:
.append( // Добавляем пункты меню:
jQuery('<ul/>').append('<li><a href="#">Remove element</a></li>')
.append('<li><a href="#">Add element</a></li>')
.append('<li><a href="#">Element style</a></li>')
.append('<li><a href="#">Element props</a></li>')
.append('<li><a href="#">Open Inspector</a></li>')
)
.show('fast'); // Показываем меню с небольшим стандартным эффектом jQuery. Как раз очень хорошо подходит для меню
}
});
Но тут отключение контексного меню идет на всем сайте через
document.oncontextmenu = function() {return false;}
А как убрать именно для моих картинок, но чтобы еще свое меню тоже работало?
