how to preventDefault inside switch e.which

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>

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>

The difference between 'return false;' and 'e.preventDefault();', Have you ever seen those two things (in the title) being used in jQuery? Here is a simple example: $("a").click(function() { The preventDefault() method cancels the event if it is cancelable, meaning that the default action that belongs to the event will not occur. For example, this can be useful when: Clicking on a "Submit" button, prevent it from submitting a form; Clicking on a link, prevent the link from following the URL; Note: Not all events are cancelable.

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>

Event.preventDefault(), The Event interface's preventDefault() method tells the user agent that if the event does not get explicitly preventDefault()' in that specification. If a table is placed within a scrollable container (like in a web app), then this breaks scrolling if the table is 100% height.. When the table is 100% height, then vertical scrolling is the job of the scrollable container and not ag-grid. e.preventDefault(); will prevent the scrolling event from bubbling up to the scrollable container.

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

stopPropogation() vs preventDefault() in JavaScript, In this article we'll see what is the difference between stopPropogation() and preventDefault() methods in an event handler. e.stopPropagation(). You still require the event.preventDefault();. What you need to do is setting passive: false on the EventListener ( document.addEventListener('mousewheel DOMMouseScroll MozMousePixelScroll', { passive: false }); ) before calling preventDefault() .

preventDefault() Event Method, Use the stopPropagation() method to handle this. Browser Support. The numbers in the table specify the first browser version that fully supports the method. Note that the event.preventDefault() will just prevent the event from happening for that specific event. So, if you have any keypress event registered on the on the parent element or ancestors, those will still be fired due to the bubbling effect. e.preventDefault() will not stop the bubbling. returning false from the event handler in jQuery

Prevent Default Explained in JavaScript, The Event.preventDefault method in JavaScript allows you to prevent the default behaviour Duration: 5:38 Posted: Apr 6, 2018 Like I described in my post, I'm able to cancel the save process but I cannot cancel the form close process. when I press "Save and Close" button, the preventDefault function cancels the save but the form closes after that and users cannot fix the validation issues.

Browser default actions, In this HTML a click on a link doesn't lead to navigation, browser doesn't do anything: For instance, the Tab key to switch from the 1st input into the 2nd. that scrolling can be prevented using preventDefault() in the handler. You can write code inside the braze bracket. If we want to change the state of a widget or to make some changes on style, then use the function setState() inside the onPressed section. setState(() { //Changes here }); If we want to change text on ‘name’, then we can do it using setState function.

Comments
  • 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.
  • @MartinParkin, problem is because browser's context menu appears. I posted the code, what's the problem with you?
  • @Ben I believe it's not really a duplicate of this question.
  • thanks, it works. Strange - dfsq's answer is incorrect and upvoted twice.
  • @qadenza it is correct and the answer here is just an improved version of it. main idea here is listening for oncontextmenu event ;)
  • Problem here is that the right is called twice on mousedown and contextmenu.
  • @qadenza That's why I said, that you probably don't even need mousedown event.