DOM

：

：

Element：click イベント

　編集：2022.09.27 by T.A.

[Edge]。→、

要素の中で、ポインティング デバイスのボタン（マウスの第 1 ボタンなど）が押されて離されたときに要素に送られます。

バブリング あり
キャンセル 可能
インターフェイス MouseEvent
イベント ハンドラー プロパティ onclick

ある要素でボタンが押され、ボタンが離される前にポインタが要素の外に移動した場合、イベントは両方の要素を含む最も具体的な祖先の要素で発生します。

click は、mousedown および mouseup イベントの後に順番通りに発生します。

¶省く→

例
mdnより

この例は <button> を連続してクリックした数を表示します。

HTML： 

<button>Click</button>

JavaScript： 

const button = document.querySelector('button');

button.addEventListener('click', event => {
  button.textContent = `Click count: ${event.detail}`;
});
click と dblclick

HTML： 

<SPAN id=IdTest>[SPAN要素。ここでマウスを操作してください…<B>[B要素]</B>テキスト<INPUT value="INPUT要素">]</SPAN><BR>
<SPAN id=IdLog></SPAN><BR>
<SPAN id=IdLog2></SPAN><BR>

JavaScript： 

function Job(eve){ //clickイベントの処理：
  D=eve; //＝[object]：[object PointerEvent]

詳細	//isTrusted＝[boolean]：true
	//pointerId＝[number]：1
	//width＝[number]：1
	//height＝[number]：1
	//pressure＝[number]：0
	//tiltX＝[number]：0
	//tiltY＝[number]：0
	//azimuthAngle＝[number]：0
	//altitudeAngle＝[number]：1.5707963267948966
	//tangentialPressure＝[number]：0
	//twist＝[number]：0
	//pointerType＝[string]：mouse
	//isPrimary＝[boolean]：false
	//getCoalescedEvents＝[function]：function getCoalescedEvents() { [native code] }
	//getPredictedEvents＝[function]：function getPredictedEvents() { [native code] }
	//screenX＝[number]：538
	//screenY＝[number]：114
	//clientX＝[number]：331
	//clientY＝[number]：39
	//ctrlKey＝[boolean]：false
	//shiftKey＝[boolean]：false
	//altKey＝[boolean]：false
	//metaKey＝[boolean]：false
	//button＝[number]：0
	//buttons＝[number]：0
	//relatedTarget＝[object]：null
	//pageX＝[number]：331
	//pageY＝[number]：1619
	//x＝[number]：331
	//y＝[number]：39
	//offsetX＝[number]：313
	//offsetY＝[number]：28
	//movementX＝[number]：0
	//movementY＝[number]：0
	//fromElement＝[object]：null
	//toElement＝[object]：null
	//layerX＝[number]：331
	//layerY＝[number]：1619
	//getModifierState＝[function]：function getModifierState() { [native code] }
	//initMouseEvent＝[function]：function initMouseEvent() { [native code] }
	//view＝[object]：[object Window]
	//detail＝[number]：2
	//sourceCapabilities＝[object]：[object InputDeviceCapabilities]
	//which＝[number]：1
	//initUIEvent＝[function]：function initUIEvent() { [native code] }
	//type＝[string]：click
	//…


  let E=eve.target;
  IdLog.innerHTML=E.tagName +"：pageX："+ eve.pageX +"、pageY："+ eve.pageY +"："+ eve.detail;
}
function Job2(eve){ //dblclickイベントの処理：
  DA=eve; //＝[object]：[object MouseEvent]

詳細	//isTrusted＝[boolean]：true
	//screenX＝[number]：538
	//screenY＝[number]：114
	//clientX＝[number]：331
	//clientY＝[number]：39
	//ctrlKey＝[boolean]：false
	//shiftKey＝[boolean]：false
	//altKey＝[boolean]：false
	//metaKey＝[boolean]：false
	//button＝[number]：0
	//buttons＝[number]：0
	//relatedTarget＝[object]：null
	//pageX＝[number]：331
	//pageY＝[number]：1619
	//x＝[number]：331
	//y＝[number]：39
	//offsetX＝[number]：312
	//offsetY＝[number]：28
	//movementX＝[number]：0
	//movementY＝[number]：0
	//fromElement＝[object]：null
	//toElement＝[object]：[object HTMLSpanElement]
	//layerX＝[number]：331
	//layerY＝[number]：1619
	//getModifierState＝[function]：function getModifierState() { [native code] }
	//initMouseEvent＝[function]：function initMouseEvent() { [native code] }
	//view＝[object]：[object Window]
	//detail＝[number]：2
	//sourceCapabilities＝[object]：[object InputDeviceCapabilities]
	//which＝[number]：1
	//initUIEvent＝[function]：function initUIEvent() { [native code] }
	//type＝[string]：dblclick
	//…


  let E=eve.target;
  IdLog2.innerHTML=E.tagName +"：pageX："+ eve.pageX +"、pageY："+ eve.pageY +"："+ eve.detail;
}
IdTest.onclick=Job;
IdTest.ondblclick=Job2;
テスト