事件觸發操作[滑鼠 MouseEvent]

今天來整理滑鼠的事件操作

在p5.js中滑鼠的事件，常用的有
mouseClicked()，單擊
doubleClicked()，雙擊

mouseMoved()，移動(沒有按下的時候)

mousePressed()，按下
mouseDragged()，拖動(按下的時候)
mouseReleased()，放開
(簡稱：點，拖，放)

mouseWheel()，滾動

按鍵的種類有 左鍵，中鍵(滾輪)，右鍵

先來看看事件的幾種程式寫法
onclick = function(e){ console.log(e); };
onclick = (e) => { console.log(e); };
產生的事件物件類別為 PointerEvent

//-- 這是以id為d1的div作為觸發的對象
//-- 將事件要處理的事情，另用 function click1(e) 編寫
<div id="d1" onclick="click1">Click Me!</div>
<script>
function click1(e) {
  console.log(e);
}
</script>

//-- 以選取id為d1的div，設定事件onclick，並以箭頭函式的方式表示
<div id="d1">Click Me!</div>
<script>
document.querySelector("#d1").onclick = (e) => { console.log(e); };
</script>


//-- 這是以整個body作為觸發的範圍
<script>
function mouseClicked(e) {
  console.log(e);
  return false;
}
</script>

一般事件的觸發，需要知道的資訊有
1.觸發的對象
2.觸發事件的種類
3.觸發的座標

let can;
function setup() {
	can = createCanvas(200, 200);
	can.id("can1");
	can.class("c1");
	can.position(100, 100);
	can.style("padding", "20px");
	can.style("border", "solid");
	can.parent("p1");
	background(100);

	document.querySelector("#d1").onclick = (e) => { console.log(e.path[0]); };
	can.onclick = (e) => { console.log(e.target+" click!"); };

}

function showEventInfo(e) {
	console.log(e);
	console.log(e.target.localName); //-- 觸發對象
	console.log(e.type);  //-- 動作種類
	console.log(e.button);  //-- 按鍵編號
	console.log(e.offsetX + ", " + e.offsetY); //-- 觸發座標
	console.log(mouseX + ", " + mouseY);  //-- 觸發座標
}

function mouseMoved(e) {
	showEventInfo(e);  //-- MouseEvent, mousemove
	return false;
}
function mouseDragged(e) {
	showEventInfo(e);  //-- MouseEvent, mousemove
	return false;
}
function mousePressed(e) {
	showEventInfo(e);  //-- MouseEvent, mousedown
	return false;
}
function mouseReleased(e) {
	showEventInfo(e);  //-- MouseEvent, mouseup
	return false;
}
function mouseClicked(e) {
	showEventInfo(e);  //-- PointerEvent, click
	return false;
}
function doubleClicked(e) {
	showEventInfo(e); //-- MouseEvent, dblclick
	return false;
}
function mouseWheel(e) {
	showEventInfo(e);  //-- WheelEvent, wheel
	return false;
}

滑鼠左鍵編號：0
滑鼠中鍵(滾輪鍵)編號：1
滑鼠右鍵編號：2