ICS MEDIA - インタラクションデザイン×ウェブテクノロジー

HTML5 と CreateJS で学ぶインタラクションデザイン

CreateJS のクリック処理の実装方法

クリック

表示オブジェクトをクリックしたときのイベントの処理を作るには、clickイベントを監視します。

書式

// イベントを登録
表示オブジェクト.addEventListener("click", handleClick);
// クリックしたとき
function handleClick(event){
    // 処理
}

サンプルとして異なる2つのシェイプに対して、クリックしたときの処理を作ってみましょう。異なる2つのシェイプそれぞれにclickイベントを登録します。

// 円の作成
var circle = new createjs.Shape();
circle.graphics.beginFill("DarkRed").drawCircle(100, 100, 80);
stage.addChild(circle);

// 四角形の作成
var rect = new createjs.Shape();
rect.graphics.beginFill("blue").drawRect(200, 20, 160, 160);
stage.addChild(rect);

// 各種マウスイベントを登録する
circle.addEventListener("click", handleCircleClick);
rect.addEventListener("click", handleRectClick);

// クリックしたとき
function handleCircleClick(event) {
    alert("円がクリックされました");
}

function handleRectClick(event) {
    alert("四角形がクリックされました");
}

次の記事へ