Onclick issue with multiple objects [Archive]

keyboard

12-17-2013, 12:43 PM

G'day all.

I have the following code (I've removed parts and only left in the relevant sections)(sorry if there are any syntax errors but there aren't in the full version):

$.fn.game = function(args) {
for(var key in args.objects) {
if(typeof args.objects[key].exec.mousedown == "function") {
$("#" + key).mousedown(function() {
args.objects[key].exec.mousedown();
});
}
}
}

$("#gameParent").game({
objects : {
main : {
hooks : {
mousedown : function() {
console.log("test");
}
}
},
enemy : {
hooks : {
mousedown : function() {

}
}
}
}
});

The idea is to the ability to create objects (for a game) then hook events on them.
When clicking on either of the objects, the hooks.mousedown() is called twice for the enemy object and not at all for the main object.

This is because args.objects[key].exec.mousedown(); runs onmousedown, which is triggered after both the objects have been looped over. This means that key will only ever point to the last object on the list.

I have no clue how to work around/restructure to fix this.

Any suggestions? :)

jscheuer1

12-17-2013, 03:04 PM

I'd try adding a self executing anonymous closure function:

$.fn.game = function(args) {
for(var key in args.objects) {
if(typeof args.objects[key].exec.keydown == "function") {
(function(k, f){
$("#" + k).mousedown(f);
})(key, args.objects[key].exec.mousedown);
}
}
}

Either way, all I get is:

Cannot read property 'keydown' of undefined

I'm assuming that's not the case in the actual code environment. If it is, nothing will work.

Here's a working example:

<!DOCTYPE html>
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8/jquery.min.js"></script>
</head>
<body>

<div id="main">Main</div>
<div id="enemy">Enemy</div>

<script type="text/javascript">
$.fn.game = function(args) {
for(var key in args.objects) {
if(typeof args.objects[key].exec.keydown == "function") {
(function(k, f){
$("#" + k).mousedown(f);
})(key, args.objects[key].exec.mousedown);
}
}
}

$("#gameParent").game({
objects : {
main : {
exec : {
mousedown : function() {
console.log("test");
},
keydown: function(){}
}
},
enemy : {
exec : {
mousedown : function() {
console.log("test2");
},
keydown: function(){}
}
}
}
});
</script>
</body>
</html>

Here's another solution:

$.fn.game = function(args) {
for(var key in args.objects) {
if(typeof args.objects[key].exec.keydown == "function") {
$("#" + key).mousedown(function() {
args.objects[this.id].exec.mousedown();
});
}
}
}

But, since it relies upon the coincidence that key is the element's id, it's not as widely applicable.

If you want more help, please include a link to the page on your site that contains the problematic code so we can check it out.