Как реализовать jquery on rightclick?

Question

[aristarhandrianov]

Как реализовать событие on right click?
При событии click все работает

$('body').on('click', '.ed', function (){

}

А вот так нет(

$('body').on('rightClick', '.ed', function (){

}

Испльзую

(function(fn) {
			var $$ = $(document);
			var mousedown = 'mousedown', mouseup = 'mouseup';
		 
			function noMenu() { return false; }
		 
			function handler(callback) {
				return function(e) {
					if (e.which === 3) { callback.call(this, e); }
					if (e.type === mousedown) { $$.one('contextmenu', noMenu); }
				};
			};
		 
			fn.rightClick = function rightClick(callback) {
				return this.rightMousedown(function() {
					$(this).one(mouseup, handler(callback));
				});
			};
		 
			fn.rightMousedown = function rightMousedown(callback) {
				return this[mousedown](handler(callback));
			};
		 
			fn.rightMouseup = function rightMouseup(callback) {
				return this[mouseup](handler(callback));
			};
		 
		})(jQuery.fn);

Answer 1

[DevMan]

jsfiddle.net/3af22m4k

Comments

[aristarhandrianov]

Как сделать чтобы rightclick срабатывал при событии .on?

[DevMan]

aristarhandrianov: .on - не событие, а биндинг хендлеров.

[aristarhandrianov]

Хорошо как сюда воткнуть событие rightclick вместо click
$('body').on('click', '.ed', function(){ ... });

[DevMan]

aristarhandrianov: jsfiddle.net/3af22m4k/1

[aristarhandrianov]

DevMan: Спасибо=)

Answer 2

[RubaXa]

Мдя, ну и насоветовали вам тут.

У jQuery есть Special Event API:

// Определяем спец. событие `rightclick`
$.event.special.rightclick = {
  bindType: "mousedown",
  delegateType: "mousedown",
  handle: function (evt) {
    if (evt.button === 2) {
      var handleObj = evt.handleObj;
      
      $(document).one('contextmenu', false);
    
      evt.type = handleObj.origType;
      ret = handleObj.handler.apply(this, arguments);
      evt.type = handleObj.type;
      
      return ret;
    }
  }
};

// Пример использования
$('.right').on({
  'rightclick': function () {
    $(this).addClass('pressed');
  },
  'mouseup': function () {
    $(this).removeClass('pressed');
  }
});

jsbin.com/gujecemadi/1/edit?js,output

Comments

[aristarhandrianov]

Отличное решение! Но я столкнулся с одним недостатком в обоих решениях.
Если событие ставиться на родителя и его потомков то обрабатывается только событие клика на родителя.

$('body').on({'rightclick', 'section, div', function(){

}

Клик на section срабатывает, а на внутренний div нет.

[RubaXa]

'section, div' — это не div внутри section, а section и div

[aristarhandrianov]

Имеется в виду их положение в верстке
То есть если есть событие на родителя и на потомка то будет срабатывать событие на родителя

$('body').on({'rightclick', 'section, div', function(){
var tag = $(this).get(0).tagName;
alert(tag)
}

HTML

К сожалению fiddle не работает(

[aristarhandrianov]

Совершенно случайно нашел решение)
Даже не понял почему оно работает)
return true;
Поменял на
return false;
И стали обрабатываться оба события

Answer 3

[aLLyofgod]

В jQuery нет встроенного события на правый клик.

$(document).ready(function(){ 
  document.oncontextmenu = function() {return false;}; //отключить выпадающее меню

  $(document).mousedown(function(e){ 
    if( e.button == 2 ) { //2  - правый клик, 3 - средний клик
      alert('Right mouse button!'); 
      return false; 
    } 
    return true; 
  }); 
});

Answer 4

[Ерлан Исманов]

Появилось . contextmenu