在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);

所以，我的炫魅是運行的頁面，我試圖返回在六邊形的粗體線瓷磚。 js通過鼠標點擊回到mainpage.js。如何在點擊鼠標時從hexagon.js到mainpage.js頁面獲取圖塊對象？

來源

2016-08-13 DidIReallyWriteThat

使用回調。

創建主函數來處理該事件

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

在主要的功能屬性添加到您的HexagonGrid，或許在構造

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

並修改電話：

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

或只是將其設置爲屬性

hexagonGrid = doSomethingWhenHexagonIsClicked;

然後修改您的clickEvent

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

謝謝。完美工作。 – DidIReallyWriteThat

在javascript中訂閱事件

回答

相關問題