April 7, 2012
jquery run functions
Question by user1022585
I have a function in jquery:
$('#map').click(function(e) {
var posX = $(this).offset().left, posY = $(this).offset().top;
if (posY < 100) {
// do this
When the user clicks within that element it will run. But I also want it to run if he presses a cursor key.
Is it possible to do something like:
$('#map').click OR key.press(function(e) {
Basically, can you set more than one event to run that function?
Just learning jquery so go easy on me.
UPDATE
function move(e) {
var posX = $(this).offset().left, posY = $(this).offset().top;
if (posX > 75 && posX < 150 && posY < 75) { var go = "N"; }
if (e.which == 38) { var go = "N"; }
$.post("inc_map.php", { move: go }, function(data){
var substr = data.split('@');
if (substr[0] != "block") {
var x1 = substr[0]; var y1 = substr[1];
x = parseInt(x1) * 32; y = parseInt(y1) * 32;
$("#mapview").css({ backgroundPosition: -x + "px " + -y + "px" });
$("#map").html(substr[2]);
$("#info").html(substr[3]);
};
$("#pos").html((x/32) + ', ' + (y/32));
});
};
$("#map").click(move).keypress(move);
Why doesnt this work? 😮
Answer by Elliot Bonneville
You’d define a function outside of the event handlers, then call it from each handler separately.
function myFunc(e) {
var posX = $(this).offset().left, posY = $(this).offset().top;
if (posY < 100) {
}
// if e.which equals 38, the up arrow was pressed
if(e.which == 38) {
// do nice stuff here
}
// the rest of your function here...
}
$("#map").click(myFunc).keypress(myFunc);
Edit: Threw in jQuery function chaining, too.
Aha, okay. I think I found your error. I’ve reformatted your code a bit and neatened it up some. Try this:
function move(e) {
var posX = $(this).offset().left,
var posY = $(this).offset().top;
var go = "";
if (posX > 75 && posX < 150 && posY < 75) {
go = "N";
}
if (e.which == 38) {
go = "N";
}
$.post("inc_map.php", {
move: go
}, function(data) {
var substr = data.split('@');
if (substr[0] != "block") {
var x1 = substr[0];
var y1 = substr[1];
x = parseInt(x1) * 32;
y = parseInt(y1) * 32;
$("#mapview").css({
backgroundPosition: -x + "px " + -y + "px"
});
$("#map").html(substr[2]);
$("#info").html(substr[3]);
};
$("#pos").html((x / 32) + ', ' + (y / 32));
});
};
Answer by Starx
Pass a common event handler between clicks and keypresses
For example:
function myFunc(e) {
//For cursor
switch(e.charCode) {
case 37:
// Left
break;
case 37:
// Up
break;
case 37:
// Right
break;
case 37:
// Down
break;
}
}
$("#map").click(myfunc).keypress(myfunc);
