Autify JavaScript Snippets
Toggle Dark/Light/Auto modeToggle Dark/Light/Auto modeToggle Dark/Light/Auto mode Back to homepage
Edit page

キャンバスのマウスイベント

このスニペットを使用して、canvas 要素内の特定の領域をクリックできます。

必要に応じてコード内の値を変更してください。

// 使用したい CSS セレクターをここに指定します
var selector = "Selector here";

// 要素を取得
var element = document.querySelector(selector);

if (!element) {
  throw new Error("Error: cannot find the element with selector (" + selector + ").");
}

// 要素の位置とサイズを取得
var rect = element.getBoundingClientRect();

// 対象としたいクリック位置の座標を指定(ここでは要素の1/4の位置)
var clickX = rect.left + rect.width / 4;
var clickY = rect.top + rect.height / 4;

// 発火させるマウスイベントの一覧
// 不要なマウスイベントは削除してください 
var mouseEvents = ['mouseover', 'mouseenter', 'mousedown', 'mouseup', 'click', 'dblclick', 'mouseout'];

// 各イベントを順に発火させる
mouseEvents.forEach(function(eventType) {
  var event = new MouseEvent(eventType, {
    bubbles: true,
    cancelable: true,
    clientX: clickX,
    clientY: clickY
  });

  element.dispatchEvent(event);
});