⇒#2526@研究ノート;

ウェブブラウザー上で，マウスクリックのイベントを取得する方法

日時	2020-8-7
関係者（共同研究者）

履歴ID	概要

履歴ID	概要

履歴ID	概要

【イベントの定義】

canvasに，clickイベントが起きたときに，onClick　関数を呼び出す．

canvas.addEventListener('click', onClick, false);

【onClick関数の定義】

function onClick(e) {

* rectでcanvasの絶対座標位置を取得し、

* クリック座標であるe.clientX,e.clientYからその分を引く

* ※クリック座標はdocumentからの位置を返すため

* ※rectはスクロール量によって値が変わるので、onClick()内でつど定義

var x = 0;

var y = 0;

var rect = e.target.getBoundingClientRect();

x = e.clientX - rect.left;

y = e.clientY - rect.top;

/*rect.topが413.875と小数点を持つことはなぜか不明*/

alert(x + "," + y)

}

取り急ぎ，報告まで．

https://edu.yz.yamagata-u.ac.jp/developer/Asp/Youzan/Laboratory/LaboNote/@LaboNote.asp?id=2526

このマークはこのページで著作権が明示されない部分について付けられたものです。

３号館（物質化学工学科棟） 3-3301

0238-26-3573