How to detect event by right clicking

Question

I would like to unregister some event with a right click.

For example, when I register an event clicking some cells, it's color will change. like below:

$(function() {  
$("#our_calendar td").click(function(){
    $(this).css('background', 'yellow');

  });
});

I would like to unregister with right click. I found some answers:

Is right click a Javascript event?

I wonder if it is possible to unregister (initialize it's color) by right clicking ,and is it possible not to display window with right click.

If someone has experienced such issues, please let me know.

thanks

score 4 · Accepted Answer · answered Dec 18 '19 at 10:37

Assuming by unregister, you mean removing the color you set initially by clicking, yes you could. You could also prevent the dropdown (contextmenu) being displayed by passing an argument e or event argument in your event handler and using by e.preventDefault();

Try the demo below, click to set color and right click to unset;

$("#our_calendar td").on("contextmenu", function(e) {
  e.preventDefault();
  $(this).css('background', 'unset');
}).on("click",function(){
  $(this).css('background', 'yellow');
});

td {
  padding: 15px;
  cursor: pointer;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<table id="our_calendar">
  <tr>
    <td>1</td>
    <td>1</td>
    <td>1</td>
    <td>1</td>
    <td>1</td>
  </tr>
  <tr>
    <td>1</td>
    <td>1</td>
    <td>1</td>
    <td>1</td>
    <td>1</td>
  </tr>
  <tr>
    <td>1</td>
    <td>1</td>
    <td>1</td>
    <td>1</td>
    <td>1</td>
  </tr>
</table>

User863 · Answer 2 · 2019-12-18T10:50:50.890

2

You are searching for contextmenu event and off()

$("a")
  .on('click', function() {
    $(this).css('background', 'yellow');
  })
  .on('contextmenu', function(e) {
    e.preventDefault();
    $(this).off('click').css('background', 'unset');
  });

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<a href="javascript:;">Button</a>

edited Dec 18 '19 at 10:50

answered Dec 18 '19 at 10:38

User863

19,346
2
17
41

score 0 · Answer 3 · edited Dec 18 '19 at 10:46

YOu can using:

$('#our_calendar td').mousedown(function(event) 
{

    switch (event.which) {
        case 1:
            alert('Left mouse button is pressed');
            break;
        case 2:
            alert('Middle mouse button is pressed');
            break;
        case 3:
            alert('Right mouse button is pressed');
            break;
        default:
            alert('Nothing');
    }
});

How to detect event by right clicking

3 Answers3