how to preventDefault inside switch e.which

Question

Why preventDefault() on case 3 doesn't work? Browser's menu should not appear on right click.

$('#btnB').on('mousedown', function(e){
 switch (e.which) {
 case 1:
  console.log('left');
  break;
 case 3:
  e.preventDefault();
  console.log('right');
  break;
 default:
  alert('323');
 }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button id='btnB'>CLICK</button>

How do you know that it isn't working? Perhaps you should post your code so that we can test it, as I can't see any problem with the example you've shown here. — Martin, Jan 03 '19 at 10:16
@MartinParkin, problem is because browser's context menu appears. I posted the code, what's the problem with you? — qadenza, Jan 03 '19 at 10:17
@Ben I believe it's not really a duplicate of this question. — dfsq, Jan 03 '19 at 10:20

score 2 · Answer 1 · edited Jan 03 '19 at 11:07

2

Context menu appears because it reacts to different event, not mousedown. Try to listen both mousedown (probably not needed even) and contextmenu events:

 $('#btnB').on('mousedown contextmenu', function(e){
  switch (e.which) {
  case 1:
    console.log('left');
    break;
  case 3:
    e.preventDefault();
    console.log('right');
    break;
  default:
    alert('323');
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button id='btnB'>CLICK</button>

edited Jan 03 '19 at 11:07

Pingolin

3,161
6
25
40

answered Jan 03 '19 at 10:19

dfsq

191,768
25
236
258

Problem here is that the `right` is called twice on `mousedown` and `contextmenu`. – Pingolin Jan 03 '19 at 10:24
@qadenza That's why I said, that you probably don't even need `mousedown` event. – dfsq Jan 03 '19 at 12:06

score 2 · Accepted Answer · answered Jan 03 '19 at 10:37

2

Same as answer of @dfsq, but with catch of double trigger on contextmenu. I cannot edit his answer for some reason and I want to show a demo.

$('#btnB').on('contextmenu mousedown', function(e) {
  switch (e.which) {
    case 1:
      console.log('left');
      break;
    case 3:
      if (e.type !== 'contextmenu') break;
      e.preventDefault();
      console.log('right');
      break;
    default:
      alert('323');
  }
});

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

answered Jan 03 '19 at 10:37

ACD

1,431
1
8
24

thanks, it works. Strange - `dfsq's` answer is incorrect and upvoted twice. – qadenza Jan 03 '19 at 10:41
@qadenza it is *correct* and the answer here is just an improved version of it. main idea here is listening for `oncontextmenu` event ;) – dfsq Jan 03 '19 at 12:10

score 1 · Answer 3 · answered Jan 03 '19 at 10:39

1

If you want to prevent the context menu from opening you can do so by listening to the contextmenu event

$('#btnB').on('contextmenu', function(e) {
            alert("hey new menu"); 
            e.preventDefault();
        });

answered Jan 03 '19 at 10:39

Ced

15,847
14
87
146

how to preventDefault inside switch e.which

3 Answers3