625

How do you obtain the clicked mouse button using jQuery?

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

this is triggered by both right and left click, what is the way of being able to catch right mouse click? I'd be happy if something like below exists:

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

21 Answers 21

956

As of jQuery version 1.1.3, event.which normalizes event.keyCode and event.charCode so you don't have to worry about browser compatibility issues. Documentation on event.which

event.which will give 1, 2 or 3 for left, middle and right mouse buttons respectively so:

$('#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!');
    }
});
14
  • 5
    @Jeff Hines - I was trying to detect a right click in Chrome and the implementation shown here appeared to work fine, but I realized that was only because the alert() prevented the context menu from appearing. :( boo Commented Nov 28, 2011 at 22:47
  • 17
    Keep scrolling down and make sure to read @JeffHines's answer. Basically, jQuery has this built-in as the event 'contextmenu'.
    – jpadvo
    Commented Dec 17, 2011 at 20:30
  • 9
    @jpadvo jQuery did not build it as "contextmenu", contextmenu is native of the browser. in native JavaScript you can attach to the oncontextmenu event.
    – Naftali
    Commented Aug 20, 2012 at 13:12
  • 6
    ie8: Unable to get value of the property 'which': object is null or undefined
    – Simon
    Commented Mar 14, 2013 at 16:08
  • 2
    Can I prevent the context menu from coming up after the event is fired?
    – kmoney12
    Commented Apr 6, 2013 at 3:07
263

Edit: I changed it to work for dynamically added elements using .on() in jQuery 1.7 or above:

$(document).on("contextmenu", ".element", function(e){
   alert('Context Menu event has fired!');
   return false;
});

Demo: jsfiddle.net/Kn9s7/5

[Start of original post] This is what worked for me:

$('.element').bind("contextmenu",function(e){
   alert('Context Menu event has fired!');
   return false;
}); 

In case you are into multiple solutions ^^

Edit: Tim Down brings up a good point that it's not always going to be a right-click that fires the contextmenu event, but also when the context menu key is pressed (which is arguably a replacement for a right-click)

8
  • 28
    This should be the accepted answer. This event works in all relevant browsers and triggers on a whole click (mouse down + mouse up in proximity). Commented Dec 16, 2011 at 18:18
  • 3
    This is the only solution that worked for me with regards to capturing the right click on a <textarea>
    – Tyler
    Commented Dec 19, 2011 at 5:07
  • 17
    Right-clicking is not the only way to trigger the context menu though.
    – Tim Down
    Commented Nov 1, 2012 at 14:55
  • 3
    I think it's the wrong approach because the contextmenu event firing does not always imply that the right mouse button was clicked. The correct approach is get button information from a mouse event (click in this case).
    – Tim Down
    Commented Nov 2, 2012 at 16:06
  • 1
    Hey! Thanks, this looks great, but I cant get it to bind to an element like a table row or even the body. it works with $(window). Im using backbone.js to populate a area #main with new content etc.
    – Harry
    Commented Jan 15, 2013 at 8:30
86

You can easily tell which mouse button was pressed by checking the which property of the event object on mouse events:

/*
  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! */
    }
});
4
  • 4
    The jQuery plugin linked above is using e.button==2 instead.
    – ceejayoz
    Commented Oct 29, 2009 at 22:33
  • 6
    yep. Using event.button cross browser is more of a problem than event.which as the numbers used for the buttons in event.button vary. Take a look at this article from Jan 2009 - unixpapa.com/js/mouse.html
    – Russ Cam
    Commented Oct 29, 2009 at 22:37
  • 1
    Wouldn't this be better to be mouseup to verify a person truly clicked the item? There's alot of times if i accidentally click something I'm able to prevent the click by holding in the mouse button and dragging outside the element. Commented Dec 3, 2014 at 19:50
  • 1
    @ChrisMarisic mouseup is probably a better event, this is just an example of the use of event.which for mouse button clicks
    – Russ Cam
    Commented Dec 3, 2014 at 22:06
39

You can also bind to contextmenu and return false:

$('selector').bind('contextmenu', function(e){
    e.preventDefault();
    //code
    return false;
});

Demo: http://jsfiddle.net/maniator/WS9S2/

Or you can make a quick plugin that does the same:

(function( $ ) {
  $.fn.rightClick = function(method) {

    $(this).bind('contextmenu rightclick', function(e){
        e.preventDefault();
        method();
        return false;
    });

  };
})( jQuery );

Demo: http://jsfiddle.net/maniator/WS9S2/2/


Using .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.

Demo: http://jsfiddle.net/maniator/WS9S2/283/

4
  • 1
    @Raynos yes, but that is the only way to handle a right-click event. if the context menu was still there then you could not do anything on a right click.
    – Naftali
    Commented Dec 13, 2011 at 15:53
  • 1
    @Raynos - there are many cases where your point is not valid, such as building an internal tool, or coding something for your own personal use..I'm sure there are more
    – vsync
    Commented Feb 15, 2012 at 14:18
  • 1
    If you actually wanted it to act like one of the jQuery event handlers (like click, for example), that should be method.call(this, e); instead of method(); That way, method gets the correct value for this and also has the event object passed to it correctly.
    – Jeremy T
    Commented Apr 27, 2012 at 18:44
  • @JeremyT that is true... you could handle the callback in any way you want ^_^
    – Naftali
    Commented Aug 20, 2012 at 13:14
30

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

Update for the current state of the things:

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>

3
  • 1
    is this msie-specific? ie is it portable across other browsers?
    – Taryn East
    Commented Mar 4, 2010 at 11:34
  • 13
    This method is now unnecessary as event.which has been introduced which eliminates cross browser compatibility.
    – Acorn
    Commented Apr 28, 2010 at 0:13
  • 8
    I suspect event.which actually eliminates cross browser incompatibility, but that's just me.
    – DwB
    Commented Jan 27, 2011 at 17:06
18
$.event.special.rightclick = {
    bindType: "contextmenu",
    delegateType: "contextmenu"
};

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

http://jsfiddle.net/SRX3y/8/

0
17

There are a lot of very good answers, but I just want to touch on one major difference between IE9 and IE < 9 when using event.button.

According to the old Microsoft specification for event.button the codes differ from the ones used by W3C. W3C considers only 3 cases:

  1. Left mouse button is clicked - event.button === 1
  2. Right mouse button is clicked - event.button === 3
  3. Middle mouse button is clicked - event.button === 2

In older Internet Explorers however Microsoft are flipping a bit for the pressed button and there are 8 cases:

  1. No button is clicked - event.button === 0 or 000
  2. Left button is clicked - event.button === 1 or 001
  3. Right button is clicked - event.button === 2 or 010
  4. Left and right buttons are clicked - event.button === 3 or 011
  5. Middle button is clicked - event.button === 4 or 100
  6. Middle and left buttons are clicked - event.button === 5 or 101
  7. Middle and right buttons are clicked - event.button === 6 or 110
  8. All 3 buttons are clicked - event.button === 7 or 111

Despite the fact that this is theoretically how it should work, no Internet Explorer has ever supported the cases of two or three buttons simultaneously pressed. I am mentioning it because the W3C standard cannot even theoretically support this.

4
  • 7
    so upon pressed button you get event.button === 0 which is no button clicked, brilliant IE ಠ_ಠ
    – Sinan
    Commented Dec 17, 2012 at 19:14
  • That's in versions of IE lower than 9. Commented Dec 17, 2012 at 19:28
  • 1
    If developers collectively stopped choosing to support ie, people would have to switch, and then developers would no longer have to worry about supporting ie.
    – ahnbizcad
    Commented Feb 16, 2015 at 23:04
  • 1
    If you want to track multiple buttons being pressed at once, use event.buttons. It also handles mouse buttons 4 and 5 (which navigate forward/backward in the browser). See this: jsfiddle.net/9hponw1t/1
    – mbomb007
    Commented Sep 25, 2020 at 19:44
8

It seems to me that a slight adaptation of TheVillageIdiot's answer would be cleaner:

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

EDIT: JQuery provides an e.which attribute, returning 1, 2, 3 for left, middle, and right click respectively. So you could also use if (e.which == 3) { alert("right click"); }

See also: answers to "Triggering onclick event using middle click"

0
4

event.which === 1 ensures it's a left-click (when using jQuery).

But you should also think about modifier keys: ctrlcmdshiftalt

If you're only interested in catching simple, unmodified left-clicks, you can do something like this:

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

To those who are wondering if they should or not use event.which in vanilla JS or Angular : It's now deprecated so prefer using event.buttons instead.

Note : With this method and (mousedown) event:

  • left click press is associated to 1
  • right click press is associated to 2
  • scroll button press is associated with 4

and (mouseup) event will NOT return the same numbers but 0 instead.

Source : https://developer.mozilla.org/en-US/docs/Web/API/MouseEvent/buttons

1
  • It also handles mouse buttons 4 and 5 (which navigate forward/backward in the browser). See this: jsfiddle.net/9hponw1t/1
    – mbomb007
    Commented Sep 25, 2020 at 19:45
3

there is also a way, to do it without JQuery!

check out this:

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
    }
});
1
  • Middle mouse seemed 4 on my PC (Ubuntu 14.04 - FireFox). I believe left and right together is 3 and middle is 4.. There has to be a better "cross browser", "cross platform" way...
    – aaa
    Commented Jul 10, 2016 at 18:43
3
<!DOCTYPE html>
<html>
<head>
    <title>JS Mouse Events - Button Demo</title>
</head>
<body>
    <button id="btn">Click me with any mouse button: left, right, middle, ...</button>
    <p id="message"></p>
    <script>
        let btn = document.querySelector('#btn');

        // disable context menu when right-mouse clicked
        btn.addEventListener('contextmenu', (e) => {
            e.preventDefault();
        });

        // show the mouse event message
        btn.addEventListener('mouseup', (e) => {
            let msg = document.querySelector('#message');
            switch (e.button) {
                case 0:
                    msg.textContent = 'Left mouse button clicked.';
                    break;
                case 1:
                    msg.textContent = 'Middle mouse button clicked.';
                    break;
                case 2:
                    msg.textContent = 'Right mouse button clicked.';
                    break;
                default:
                    msg.textContent = `Unknown mouse button code: ${event.button}`;
            }
        });
    </script>
</body>
</html>
2

If you are looking for "Better Javascript Mouse Events" which allow for

  • left mousedown
  • middle mousedown
  • right mousedown
  • left mouseup
  • middle mouseup
  • right mouseup
  • left click
  • middle click
  • right click
  • mousewheel up
  • mousewheel down

Have a look at this cross browser normal javascript which triggers the above events, and removes the headache work. Just copy and paste it into the head of your script, or include it in a file in the <head> of your document. Then bind your events, refer to the next code block below which shows a jquery example of capturing the events and firing the functions assigned to them, though this works with normal javascript binding as well.

If your interested in seeing it work, have a look at the 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);
})();

Better Mouse Click Events Example (uses jquery for simplicity, but the above will work cross browser and fire the same event names, IE uses on before the names)

<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>

And for those who are in need of the minified version...

!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)}();
1
$("body").on({
    click: function(){alert("left click");},
    contextmenu: function(){alert("right click");}   
});
1
  • You should probably add some details a to why it works. - I agree that it does, but you're not explaining to a n00b why. Commented Mar 1, 2018 at 11:23
1

Oold old post - but thought would share with complete answer to people asking above about all mouse click event types.

Add this script so it applies to the entire page:

var onMousedown = function (e) {
     if (e.which === 1) {/* Left Mouse Click */}
     else if (e.which === 2) {/* Middle Mouse Click */}
     else if (e.which === 3) {/* Right Mouse Click */}
};
clickArea.addEventListener("mousedown", onMousedown);

Note: Make sure you 'return false;' on the element being clicked - is really important.

Cheers!

0
$(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;

    }


});
1
  • @Nitin.Katti :- This is work up on mouse point and left button click if freeze the left button of mouse then it stop the re sizing. Commented Apr 30, 2013 at 12:46
0

With jquery you can use event object type

jQuery(".element").on("click contextmenu", function(e){
   if(e.type == "contextmenu") {
       alert("Right click");
   }
});
0
$.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");
}); 
0

you can try this code:

event.button

Return Value: A Number, representing which mouse button that was pressed when the mouse event occured.

Possible values:

0 : Left mouse button 1 : Wheel button or middle button (if present) 2 : Right mouse button Note: Internet Explorer 8 and earlier has different return values:

1 : Left mouse button 2 : Right mouse button 4 : Wheel button or middle button (if present) Note: For a left-hand configured mouse, the return values are reversed

0

Here is a plugin I wrote called $.fn.clickable. There is also a global function called $.clickable.

You can call it like this:

$('.clickable').clickable({
  onLeftClick:   genericClickHandler,
  onMiddleClick: genericClickHandler,
  onRightClick:  genericClickHandler
});

Or this:

$.clickable('.clickable', {
  onLeftClick:   genericClickHandler,
  onMiddleClick: genericClickHandler,
  onRightClick:  genericClickHandler
});

The plugin internally attaches a mouseup and contextmenu event handlers and switches on the event button to determine which button was pressed and forward the event to the appropriate callback.

I even added a basic toast plugin to make the example more interactive.

$(function() {
  const $toast = $.initToast();

  $('.clickable').clickable({
    onLeftClick:   genericClickHandler,
    onMiddleClick: genericClickHandler,
    onRightClick:  genericClickHandler
  });

  function genericClickHandler(event) {
    $toast.showToast({
      message: getMsg(event.button)
    })
  }

  function getMsg(button) {
    switch (button) {
      case 0: return 'Left-click';
      case 1: return 'Middle-click';
      case 2: return 'Right-click';
    }
  }
});

(function($) {
  // Clickable
  var defaultClickOptions = {
    onLeftClick: null,
    onMiddleClick: null,
    onRightClick: null
  };
  function callHandler(callback, ...args) {
    if (typeof callback === 'function') callback(...args);
  }
  function routeClick(event, options) {
    switch (event.button) {
      case 0: return callHandler(options.onLeftClick, event);
      case 1: return callHandler(options.onMiddleClick, event);
      case 2: return callHandler(options.onRightClick, event);
    }
  }
  $.fn.clickable = function(options) {
    var opts = $.extend(true, {}, defaultClickOptions, options);
    this.each(function() {
      $(this)
        .on('mouseup', function(event) {
          routeClick(event, opts);
        })
        .on('contextmenu', function(event) {
          event.preventDefault();
        });
    });
  };
  $.clickable = function(selector, options) {
    var opts = $.extend(true, {}, defaultClickOptions, options);
    $('body')
      .on('mouseup', selector, function(event) {
        routeClick(event, opts);
      })
      .on('contextmenu', selector, function(event) {
        event.preventDefault();
      });
  };
  // Toast
  var defaultToastOptions = {
    message: '',
    duration: 1000,
    delay: 0
  };
  $.initToast = function() {
    return $('<div>', { class: 'toast' })
      .attr('data-hidden', true)
      .append($('<div>', { class: 'toast-content' }))
      .appendTo('body');
  };
  $.toggleToast = function($toast, hidden, message) {
    $toast.attr('data-hidden', hidden)
      .find('.toast-content')
      .text(message || '');
  };
  $.fn.showToast = function(options) {
    var $toast = this;
    var opts = $.extend(true, {}, defaultToastOptions, options);
    setTimeout(function() {
      $.toggleToast($toast, false, opts.message);
      setTimeout(function() {
        $toast.closeToast();
      }, opts.duration);
    }, opts.delay);
    return $toast;
  };
  $.fn.closeToast = function() {
    $.toggleToast(this, true);
  };
})(jQuery);
html, body {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
}

body {
  display: flex;
  align-items: center;
  justify-content: center;
}

.clickable {
  display: flex;
  font-family: monospace;
  align-items: center;
  justify-content: center;
  border: thin dashed #DD8;
  padding: 1rem;
  cursor: pointer;
}

.toast {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  z-index: 100;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding-top: 1rem;
  background: rgba(0, 0, 0, 0.2);
}

.toast[data-hidden="true"] {
  display: none;
}

.toast-content {
  background: #efe;
  border: thin solid #8c8;
  padding: 0.25rem 0.5rem;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<div class="clickable">Click me with any mouse button: [left|middle|right]</div>

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

   $(document).on("rightclick", "div", function() {
   console.log("hello");
    return false;
    });
2
  • 1
    Hi. This answer is being flagged as low quality for deletion. It seems you've added an answer to a question that was answered some time ago. Unless there is an explanation in the answer that explains how this contribution improves the accepted answer, I am inclined to vote to delete too.
    – Popnoodles
    Commented Jun 24, 2014 at 11:42
  • 1
    @popnoodles, its okay but never repeat it. Commented Jun 24, 2014 at 12:06

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.