JavaScriptのイベント購読

私は2種類のjavascriptファイルを持っています。JavaScriptのイベント購読

hexagon.js

function HexagonGrid(canvasId, radius) { 
this.radius = radius; 

this.height = Math.sqrt(3) * radius; 
this.width = 2 * radius; 
this.side = (3/2) * radius; 

this.canvas = document.getElementById(canvasId); 
this.context = this.canvas.getContext('2d'); 

this.canvasOriginX = 0; 
this.canvasOriginY = 0; 

this.canvas.addEventListener("mousedown", this.clickEvent.bind(this), false); 

this.hexGridList = {}; 
}; 

    HexagonGrid.prototype.clickEvent = function (e) { 
    var mouseX = e.pageX; 
    var mouseY = e.pageY; 

    var localX = mouseX - this.canvasOriginX; 
    var localY = mouseY - this.canvasOriginY; 

    **var tile = this.getSelectedTile(localX, localY);** 

    if (tile.column >= 0 && tile.row >= 0) { 

    //find 
    //this.hexGridList['row' + tile.row + 'column' + tile.column]. 

    var drawy = tile.column % 2 == 0 ? (tile.row * this.height) + this.canvasOriginY + 6 : (tile.row * this.height) + this.canvasOriginY + 6 + (this.height/2); 
     var drawx = (tile.column * this.side) + this.canvasOriginX; 

     this.drawHex(drawx, drawy - 6, "rgba(110,110,70,0.3)", ""); 
    } 
};

Mainpage.js

<script src="Hexagon.js"></script> 
    var hexagonGrid = new HexagonGrid("HexCanvas", 50);

だから、私のメインページが実行されているページで、iは、六角形で太字の行にタイルを返すようにしようとしています。 jsはマウスクリックでmainpage.jsに戻ります。マウスのクリックで、hexagon.jsからmainpage.jsページにタイルオブジェクトを取得するにはどうすればよいですか？

出典

2016-08-13 DidIReallyWriteThat

コールバックを使用します。

function HexagonGrid(canvasId, radius, callback) { 
    ... 
    this.callback = callback 
    ... 
}

おそらくコンストラクタで、あなたのHexagonGridに機能プロパティを追加し、メインで呼び出しを変更するイベント

function doSomethingWhenHexagonIsClicked(hg, tile) { 
    ... 
}

を処理するために、メインで関数を作成します。

var hexagonGrid = new HexagonGrid("HexCanvas", 50, doSomethingWhenHexagonIsClicked);

または単にプロパティとして設定してください

その後、

hexagonGrid = doSomethingWhenHexagonIsClicked;

そして

HexagonGrid.prototype.clickEvent = function (e) { 
    ... 
    var tile = this.getSelectedTile(localX, localY); 
    if (this.callback) { 
     this.callback(this, tile); 
    } 
    ... 
}

簡単な例（jQueryのバージョンコメントアウト）

function handleFoo() { 
 
    console.log("Callback called"); 
 
} 
 

 
Foo.prototype.clickEvent = function(e) { 
 
    if (this.callback) { 
 
     this.callback(); 
 
    } 
 
} 
 

 
function Foo(id, callback) { 
 
    this.callback = callback; 
 
    //$(id).on('click', this.clickEvent.bind(this)); 
 
    document.getElementById(id).addEventListener('click', this.clickEvent.bind(this), false); 
 
} 
 

 
var foo; 
 
function init() { 
 
    //foo = new Foo('#button', handleFoo); 
 
    foo = new Foo('button', handleFoo); 
 
} 
 

 
//$(document).ready(init); 
 
document.addEventListener("DOMContentLoaded", init, false);

<!-- script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script --> 
 
<body> 
 
<form name="test"> 
 
<input id="button" type="button" /> 
 
</form> 
 
</body>

出典

2016-08-13 21:12:14 Tibrogargan

あなたclickEventを変更するには、ありがとうございます。完璧に働いた。 – DidIReallyWriteThat

JavaScriptのイベント購読

答えて

関連する問題