JSFiddle - React, Tailwind, and code Playground

HTML

<div id="target">right-click here</div>
<button id="resetBtn">清空</button>

CSS

div{
  width:200px;
  height:auto;
  background:pink;
  padding:20px;
}
div.contextmenu{
  background: grey;
}

JavaScript

// 一个点击事件会激发哪几个鼠标事件
var demo = document.getElementById('target');
var resetBtn = document.getElementById('resetBtn');
demo.onclick = function () {
	demo.innerHTML += "<br/> click";
}
demo.ondblclick = function () {
	demo.innerHTML += "<br/> dblclick";
}
demo.onmouseup = function () {
	demo.innerHTML += "<br/> mouseup";
}
demo.onmousedown = function () {
	demo.innerHTML += "<br/> mousedown";
}
demo.oncontextmenu = function () {
	demo.innerHTML += "<br/> contextmenu";
}
resetBtn.onclick = function () {
	demo.innerHTML = '';
}

/* 定义鼠标右击事件
$('#target').on('contextmenu',function(){
	$('#target').toggleClass('contextmenu');
  event.preventDefault();
});*/
/* 移除右击事件
$('#target').off('contextmenu');*/