Question

为什么Price上的preventDefault()不起作用？浏览器的菜单不应右键单击。

case 3

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

Answer 1

出现上下文菜单是因为它对不同的事件做出反应，而不是鼠标按下。尝试同时监听mousedown（可能甚至不需要）和contextmenu事件：

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

Answer 2

与@dfsq的答案相同，但在上下文菜单上有两次触发的问题。由于某种原因，我无法编辑他的答案，我想展示一个演示。

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

Answer 3

如果要阻止打开上下文菜单，可以通过侦听contextmenu事件来实现

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

如何防止交换机内部的默认值

3 个答案: