javascript مرور كيفية التمييز بين النقر بزر الماوس الأيمن والأيمن مع jQuery




كود تكبير الصورة عند الضغط عليها html (13)

يمكنك أيضا 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/

كيف يمكنك الحصول على زر الماوس النقر باستخدام jQuery؟

$('div').bind('click', function(){
    alert('clicked');
});

يتم تشغيل هذا بواسطة النقر بزر الماوس الأيمن أو الأيسر ، ما هي الطريقة التي تمكنك من النقر بزر الماوس الأيمن فوق الماوس؟ سأكون سعيدًا إذا كان هناك شيء مثل ما يلي:

$('div').bind('rightclick', function(){ 
    alert('right mouse button is pressed');
});

$("#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>


$.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");
}); 

$(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");
   }
});

إذا كنت تبحث عن "أفضل أحداث جافا سكريبت ماوس" والتي تسمح

  • تركت mousedown
  • منتصف mousedown
  • mousedown الصحيح
  • الماوس الأيسر
  • الماوس الأوسط
  • الماوس الصحيح
  • الزر الأيسر
  • فوق المتوسطة
  • انقر بزر الماوس الأيمن
  • عجلة الفأرة فوق
  • عجلة الماوس لأسفل

ألقِ نظرة على جافا سكريبت العادي في المتصفح المتقاطع الذي يشغل الأحداث المذكورة أعلاه ، ويزيل عمل الصداع. ما عليك سوى نسخها ولصقها في رأس النص البرمجي ، أو تضمينها في ملف في <head> المستند. ثم ربط الأحداث الخاصة بك ، الرجوع إلى كتلة التعليمة البرمجية التالية أدناه والتي تعرض مثال مسجلاً لالتقاط الأحداث وإطلاق الوظائف المعينة إليها ، على الرغم من أن هذا يعمل مع ربط جافا سكريبت العادي أيضًا.

إذا كنت مهتمًا برؤيته ، فقم بإلقاء نظرة على 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 للبساطة ، ولكن ما سبق سيعمل متصفحًا متقاطعًا وإطلاق أسماء الحدث نفسها ، ويستخدم IE قبل الأسماء)

<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)}();

اعتبارًا من jQuery version 1.1.3 ، event.which normalizes 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 ، ولكن أيضًا عند الضغط على مفتاح قائمة السياق (والذي يمكن الاستعاضة عنه right-click )


    $.event.special.rightclick = {
     bindType: "contextmenu",
        delegateType: "contextmenu"
      };

   $(document).on("rightclick", "div", function() {
   console.log("hello");
    return false;
    });

يبدو لي أن التكيف الطفيف من إجابة TheVillageIdiot سيكون أكثر نظافة:

$('#element').bind('click', function(e) {
  if (e.button == 2) {
    alert("Right click");
  }
  else {
    alert("Some other click");
  }
}

تحرير: يوفر JQuery سمة e.which ، بالعودة 1 ، 2 ، 3 e.which اليسرى ، الوسطى ، واليمين على التوالي. لذا يمكنك أيضًا استخدامه if (e.which == 3) { alert("right click"); } if (e.which == 3) { alert("right click"); }

راجع أيضًا: إجابات على "حدث Triggering onclick باستخدام النقرة الوسطى"


هناك الكثير من الإجابات الجيدة ، لكنني أريد فقط أن أتطرق إلى أحد الاختلافات الرئيسية بين IE9 و IE <9 عند استخدام event.button .

وفقًا لمواصفات Microsoft القديمة لـ event.button ، تختلف الرموز عن تلك المستخدمة بواسطة W3C. تعتبر W3C 3 حالات فقط:

  1. يتم النقر على زر الماوس الأيسر - event.button === 1
  2. يتم النقر بزر الماوس الأيمن - event.button === 3
  3. يتم النقر على زر الماوس الأوسط - event.button === 2

في مستكشفات الإنترنت الأقدم ، ومع ذلك ، فإن Microsoft تقوم بقلب بعض الشيء للضغط على الزر وهناك 8 حالات:

  1. لم يتم النقر على أي زر - event.button === 0 أو 000
  2. يتم النقر على الزر الأيسر - event.button === 1 أو 001
  3. يتم النقر بزر الماوس الأيمن - event.button === 2 or 010
  4. يتم النقر على الأزرار اليمنى event.button === 3 - event.button === 3 أو 011
  5. يتم النقر على الزر الأوسط - event.button === 4 أو 100
  6. يتم النقر على الأزرار الوسطى واليسرى - event.button === 5 أو 101
  7. يتم النقر على الأزرار الوسطى و اليمنى - event.button === 6 أو 110
  8. يتم النقر على جميع الأزرار الثلاثة - event.button === 7 أو 111

على الرغم من حقيقة أن هذا هو نظريًا كيف يجب أن يعمل ، لم يدعم Internet Explorer حالات الأزرار الثلاثة أو الثلاثة في نفس الوقت. أنا أذكر ذلك لأن معيار W3C لا يمكنه دعم ذلك من الناحية النظرية.


يمكنك بسهولة معرفة زر الماوس الذي تم الضغط عليه عن طريق التحقق من خاصية كائن الحدث على أحداث الماوس:

/*
  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! */
    }
});

$("body").on({
    click: function(){alert("left click");},
    contextmenu: function(){alert("right click");}   
});




right-click