My nerd rage aside, what is the best way to customize my functions based on the platform my html5 document is being displayed on?
I am thinking... pc, mac, iPhone, FireFox, Chrome, Opera, etc.
I'd rather not go through each and every single event, parse for the event fields, then perform the action, which is what I see in almost all google searches I have done...
function OnMouseMove(e){
if(e.pageX) ...
else if (window.event.clientX) ....
else ....
}
I think that is totally bad way to do this. I have the following code working for both Chrome and Firefox, and I was hoping someone with more HTML5 coding experience than I have, could help flesh this out for other browsers / platforms...
var c;
var co;
function Init(){
// get the 'canvas' element
c = document.getElementById("c");
// get the 2d context
co = c.getContext("2d");
// here is where I want to determine my listeners... AT LOAD TIME
if(!window.event){ // this means it is fire fox ....
c.addEventListener("mousemove", _PageMouseMove, false);
}
else{ // this means it is chrome...
c.addEventListener("mousemove", _ClientMouseMove, false);
}
}
// here I have my personalized handlers, based on the platform....
function _PageMouseMove(e){
document.getElementById("x").innerHTML = "pageX: "+e.pageX;
document.getElementById("y").innerHTML = "pageY: "+e.pageY;
}
function _ClientMouseMove(e){
document.getElementById("x").innerHTML = "clientX: "+e.clientX;
document.getElementById("y").innerHTML = "clientY: "+e.clientY;
}
Isn't there a better way to do something like this? I could even imagine loading different src files based on this...
Please point me in the right direction!