在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中订阅事件

回答

相关问题