كيفية التمييز بين النقر بالماوس الأيسر والأيمن باستخدام jQuery
-
05-07-2019 - |
سؤال
كيف يمكنك الحصول على زر الماوس الذي تم النقر عليه باستخدام jQuery؟
$('div').bind('click', function(){
alert('clicked');
});
يتم تشغيل هذا عن طريق النقر بزر الماوس الأيمن والأيسر، ما هي طريقة القدرة على النقر بزر الماوس الأيمن؟سأكون سعيدًا إذا كان هناك شيء مثل أدناه:
$('div').bind('rightclick', function(){
alert('right mouse button is pressed');
});
المحلول
اعتبارًا من الإصدار 1.1.3 من jQuery، event.which
تطبيع event.keyCode
و event.charCode
لذلك لا داعي للقلق بشأن مشكلات توافق المتصفح. التوثيق على event.which
event.which
سيعطي 1 أو 2 أو 3 لأزرار الماوس اليسرى والوسطى واليمنى على التوالي، لذلك:
$('#element').mousedown(function(event) {
switch (event.which) {
case 1:
alert('Left Mouse button pressed.');
break;
case 2:
alert('Middle Mouse button pressed.');
break;
case 3:
alert('Right Mouse button pressed.');
break;
default:
alert('You have a strange Mouse!');
}
});
نصائح أخرى
يحرر: لقد قمت بتغييره للعمل من أجل العناصر المضافة ديناميكيًا باستخدام .on()
في jQuery 1.7 أو أعلى:
$(document).on("contextmenu", ".element", function(e){
alert('Context Menu event has fired!');
return false;
});
العرض التوضيحي: jsfiddle.net/kn9s7/5
بداية المنشور الأصلي] هذا ما نجح بالنسبة لي:
$('.element').bind("contextmenu",function(e){
alert('Context Menu event has fired!');
return false;
});
في حال كنت في حلول متعددة ^ ^
يحرر: يظهر تيم داون نقطة جيدة أنه لن يكون دائمًا right-click
هذا يطلق contextmenu
الحدث ، ولكن أيضًا عندما يتم الضغط على مفتاح قائمة السياق (والذي يمكن القول أنه بديل لـ a right-click
)
يمكنك بسهولة معرفة زر الماوس الذي تم الضغط عليه عن طريق التحقق من which
خاصية كائن الحدث على أحداث الماوس:
/*
1 = Left mouse button
2 = Centre mouse button
3 = Right mouse button
*/
$([selector]).mousedown(function(e) {
if (e.which === 3) {
/* Right mouse button was clicked! */
}
});
يمكنك أيضا bind
إلى contextmenu
و return false
:
$('selector').bind('contextmenu', function(e){
e.preventDefault();
//code
return false;
});
العرض التوضيحي: http://jsfiddle.net/maniator/ws9s2/
أو يمكنك عمل مكون إضافي سريع يفعل الشيء نفسه:
(function( $ ) {
$.fn.rightClick = function(method) {
$(this).bind('contextmenu rightclick', function(e){
e.preventDefault();
method();
return false;
});
};
})( jQuery );
العرض التوضيحي: http://jsfiddle.net/maniator/ws9s2/2/
استخدام .on(...)
jQuery> = 1.7:
$(document).on("contextmenu", "selector", function(e){
e.preventDefault();
//code
return false;
}); //does not have to use `document`, it could be any container element.
العرض التوضيحي: http://jsfiddle.net/maniator/ws9s2/283/
$("#element").live('click', function(e) {
if( (!$.browser.msie && e.button == 0) || ($.browser.msie && e.button == 1) ) {
alert("Left Button");
}
else if(e.button == 2){
alert("Right Button");
}
});
تحديث للحالة الحالية للأشياء:
var $log = $("div.log");
$("div.target").on("mousedown", function() {
$log.text("Which: " + event.which);
if (event.which === 1) {
$(this).removeClass("right middle").addClass("left");
} else if (event.which === 2) {
$(this).removeClass("left right").addClass("middle");
} else if (event.which === 3) {
$(this).removeClass("left middle").addClass("right");
}
});
div.target {
border: 1px solid blue;
height: 100px;
width: 100px;
}
div.target.left {
background-color: #0faf3d;
}
div.target.right {
background-color: #f093df;
}
div.target.middle {
background-color: #00afd3;
}
div.log {
text-align: left;
color: #f00;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="target"></div>
<div class="log"></div>
$.event.special.rightclick = {
bindType: "contextmenu",
delegateType: "contextmenu"
};
$(document).on("rightclick", "div", function() {
console.log("hello");
return false;
});
هناك الكثير من الإجابات الجيدة جدًا ، لكنني أريد فقط أن أتطرق إلى فرق كبير واحد بين IE9 و IE <9 عند استخدام event.button
.
وفقًا لمواصفات Microsoft القديمة لـ event.button
تختلف الرموز عن تلك المستخدمة من قبل W3C. ينظر W3C في 3 حالات فقط:
- يتم النقر على زر الماوس الأيسر -
event.button === 1
- يتم النقر على زر الماوس الأيمن -
event.button === 3
- يتم النقر على زر الماوس الأوسط -
event.button === 2
في كبار السن من المستكشفين على الإنترنت ، تقلب Microsoft قليلاً إلى الزر المضغوط وهناك 8 حالات:
- لا يتم النقر على زر -
event.button === 0
أو 000 - يتم النقر فوق الزر الأيسر -
event.button === 1
أو 001 - يتم النقر على الزر الأيمن -
event.button === 2
أو 010 - يتم النقر على الأزرار اليسرى واليمنى -
event.button === 3
أو 011 - يتم النقر على الزر الأوسط -
event.button === 4
أو 100 - يتم النقر على الأزرار الوسطى واليسرى -
event.button === 5
أو 101 - يتم النقر على الأزرار المتوسطة واليمنى -
event.button === 6
أو 110 - يتم النقر على جميع الأزرار الثلاثة -
event.button === 7
أو 111
على الرغم من حقيقة أن هذا هو من الناحية النظرية كيف ينبغي أن ينجح ، لم يدعم أي مستكشف Internet حالات اثنين أو ثلاثة أزرار في وقت واحد. أنا أذكر ذلك لأن معيار W3C لا يمكنه حتى دعم هذا من الناحية النظرية.
يبدو لي أن تكيفًا طفيفًا لإجابة TheVillageidiot سيكون أكثر نظافة:
$('#element').bind('click', function(e) {
if (e.button == 2) {
alert("Right click");
}
else {
alert("Some other click");
}
}
تحرير: يوفر jQuery e.which
سمة ، إرجاع 1 ، 2 ، 3 للسارة والمتوسطة ، والنقر بزر الماوس الأيمن على التوالي. لذلك يمكنك أيضا استخدام if (e.which == 3) { alert("right click"); }
انظر أيضا: إجابات ل "تشغيل حدث onclick باستخدام النقر الأوسط"
event.which === 1
يضمن أنه نقرة يسارية (عند استخدام jQuery).
ولكن يجب أن تفكر أيضًا في مفاتيح المعدل: كنترولCMDتحولالبديل
إذا كنت مهتمًا فقط بالقبض على النقرات اليسرى البسيطة غير المعدلة ، فيمكنك فعل شيء مثل هذا:
var isSimpleClick = function (event) {
return !(
event.which !== 1 || // not a left click
event.metaKey || // "open link in new tab" (mac)
event.ctrlKey || // "open link in new tab" (windows/linux)
event.shiftKey || // "open link in new window"
event.altKey // "save link as"
);
};
$('a').on('click', function (event) {
if (isSimpleClick(event)) {
event.preventDefault();
// do something...
}
});
إذا كنت تبحث عن "أحداث ماوس JavaScript Better" التي تسمح بذلك
- غادر موسدون
- MuseDown الأوسط
- يمين موساون
- اليسار الماوس
- mouseup الأوسط
- الفأرة اليمنى
- الزر الأيسر
- فوق المتوسطة
- انقر على اليمين
- عجلة الفأرة فوق
- موسيويل أسفل
ألقِ نظرة على هذا المتصفح المتقاطع JavaScript الذي يؤدي إلى الأحداث أعلاه ، ويزيل أعمال الصداع. ما عليك سوى نسخه ولصقه في رأس البرنامج النصي الخاص بك ، أو إدراجه في ملف في <head>
من المستند الخاص بك. ثم قم بربط الأحداث الخاصة بك ، راجع كتلة الكود التالية أدناه والتي تعرض مثالًا jQuery لالتقاط الأحداث وإطلاق الوظائف المخصصة لها ، على الرغم من أن هذا يعمل مع ربط JavaScript العادي أيضًا.
إذا كنت مهتمًا برؤيتها تعمل ، فقم بإلقاء نظرة على JSFiddle: https://jsfiddle.net/bnefn/
/**
Better Javascript Mouse Events
Author: Casey Childers
**/
(function(){
// use addEvent cross-browser shim: https://gist.github.com/dciccale/5394590/
var addEvent = function(a,b,c){try{a.addEventListener(b,c,!1)}catch(d){a.attachEvent('on'+b,c)}};
/* This function detects what mouse button was used, left, right, middle, or middle scroll either direction */
function GetMouseButton(e) {
e = window.event || e; // Normalize event variable
var button = '';
if (e.type == 'mousedown' || e.type == 'click' || e.type == 'contextmenu' || e.type == 'mouseup') {
if (e.which == null) {
button = (e.button < 2) ? "left" : ((e.button == 4) ? "middle" : "right");
} else {
button = (e.which < 2) ? "left" : ((e.which == 2) ? "middle" : "right");
}
} else {
var direction = e.detail ? e.detail * (-120) : e.wheelDelta;
switch (direction) {
case 120:
case 240:
case 360:
button = "up";
break;
case -120:
case -240:
case -360:
button = "down";
break;
}
}
var type = e.type
if(e.type == 'contextmenu') {type = "click";}
if(e.type == 'DOMMouseScroll') {type = "mousewheel";}
switch(button) {
case 'contextmenu':
case 'left':
case 'middle':
case 'up':
case 'down':
case 'right':
if (document.createEvent) {
event = new Event(type+':'+button);
e.target.dispatchEvent(event);
} else {
event = document.createEventObject();
e.target.fireEvent('on'+type+':'+button, event);
}
break;
}
}
addEvent(window, 'mousedown', GetMouseButton);
addEvent(window, 'mouseup', GetMouseButton);
addEvent(window, 'click', GetMouseButton);
addEvent(window, 'contextmenu', GetMouseButton);
/* One of FireFox's browser versions doesn't recognize mousewheel, we account for that in this line */
var MouseWheelEvent = (/Firefox/i.test(navigator.userAgent)) ? "DOMMouseScroll" : "mousewheel";
addEvent(window, MouseWheelEvent, GetMouseButton);
})();
مثال على أحداث انقر فوق ماوس أفضل (يستخدم jQuery للبساطة ، ولكن ما سبق سيعمل المتصفح المتقاطع ويطلق أسماء الأحداث نفسها ، أي استخدامها قبل الأسماء)
<div id="Test"></div>
<script type="text/javascript">
$('#Test').on('mouseup',function(e){$(this).append(e.type+'<br />');})
.on('mouseup:left',function(e){$(this).append(e.type+'<br />');})
.on('mouseup:middle',function(e){$(this).append(e.type+'<br />');})
.on('mouseup:right',function(e){$(this).append(e.type+'<br />');})
.on('click',function(e){$(this).append(e.type+'<br />');})
.on('click:left',function(e){$(this).append(e.type+'<br />');})
.on('click:middle',function(e){$(this).append(e.type+'<br />');})
.on('click:right',function(e){$(this).append(e.type+'<br />');})
.on('mousedown',function(e){$(this).html('').append(e.type+'<br />');})
.on('mousedown:left',function(e){$(this).append(e.type+'<br />');})
.on('mousedown:middle',function(e){$(this).append(e.type+'<br />');})
.on('mousedown:right',function(e){$(this).append(e.type+'<br />');})
.on('mousewheel',function(e){$(this).append(e.type+'<br />');})
.on('mousewheel:up',function(e){$(this).append(e.type+'<br />');})
.on('mousewheel:down',function(e){$(this).append(e.type+'<br />');})
;
</script>
وبالنسبة لأولئك الذين يحتاجون إلى النسخة المصغرة ...
!function(){function e(e){e=window.event||e;var t="";if("mousedown"==e.type||"click"==e.type||"contextmenu"==e.type||"mouseup"==e.type)t=null==e.which?e.button<2?"left":4==e.button?"middle":"right":e.which<2?"left":2==e.which?"middle":"right";else{var n=e.detail?-120*e.detail:e.wheelDelta;switch(n){case 120:case 240:case 360:t="up";break;case-120:case-240:case-360:t="down"}}var c=e.type;switch("contextmenu"==e.type&&(c="click"),"DOMMouseScroll"==e.type&&(c="mousewheel"),t){case"contextmenu":case"left":case"middle":case"up":case"down":case"right":document.createEvent?(event=new Event(c+":"+t),e.target.dispatchEvent(event)):(event=document.createEventObject(),e.target.fireEvent("on"+c+":"+t,event))}}var t=function(e,t,n){try{e.addEventListener(t,n,!1)}catch(c){e.attachEvent("on"+t,n)}};t(window,"mousedown",e),t(window,"mouseup",e),t(window,"click",e),t(window,"contextmenu",e);var n=/Firefox/i.test(navigator.userAgent)?"DOMMouseScroll":"mousewheel";t(window,n,e)}();
$("body").on({
click: function(){alert("left click");},
contextmenu: function(){alert("right click");}
});
$(document).ready(function () {
var resizing = false;
var frame = $("#frame");
var origHeightFrame = frame.height();
var origwidthFrame = frame.width();
var origPosYGrip = $("#frame-grip").offset().top;
var origPosXGrip = $("#frame-grip").offset().left;
var gripHeight = $("#frame-grip").height();
var gripWidth = $("#frame-grip").width();
$("#frame-grip").mouseup(function (e) {
resizing = false;
});
$("#frame-grip").mousedown(function (e) {
resizing = true;
});
document.onmousemove = getMousepoints;
var mousex = 0, mousey = 0, scrollTop = 0, scrollLeft = 0;
function getMousepoints() {
if (resizing) {
var MouseBtnClick = event.which;
if (MouseBtnClick == 1) {
scrollTop = document.documentElement ? document.documentElement.scrollTop : document.body.scrollTop;
scrollLeft = document.documentElement ? document.documentElement.scrollLeft : document.body.scrollLeft;
mousex = event.clientX + scrollLeft;
mousey = event.clientY + scrollTop;
frame.height(mousey);
frame.width(mousex);
}
else {
resizing = false;
}
}
return true;
}
});
مع jQuery يمكنك استخدامه event object type
jQuery(".element").on("click contextmenu", function(e){
if(e.type == "contextmenu") {
alert("Right click");
}
});
هناك أيضًا طريقة ، للقيام بذلك بدون jQuery!
ألق نظرة على هذا:
document.addEventListener("mousedown", function(evt) {
switch(evt.buttons) {
case 1: // left mouse
case 2: // right mouse
case 3: // middle mouse <- I didn't tested that, I just got a touchpad
}
});
$.fn.rightclick = function(func){
$(this).mousedown(function(event){
if(event.button == 2) {
var oncontextmenu = document.oncontextmenu;
document.oncontextmenu = function(){return false;};
setTimeout(function(){document.oncontextmenu = oncontextmenu;},300);
func(event);
return false;
}
});
};
$('.item').rightclick(function(e){
alert("item");
});
$.event.special.rightclick = {
bindType: "contextmenu",
delegateType: "contextmenu"
};
$(document).on("rightclick", "div", function() {
console.log("hello");
return false;
});