Value of this.id for same element is different between browsers
<p>I'm using Raphael.js to handle an SVG map. It does great in all desktop browsers. I have a click function to fire off a few things when a given area on the map is clicked. It relies on grabbing the (this.id) of the clicked object and spitting back some results. </p>

<p>Problem is that it works on desktop browsers Safari, Opera, IE9, and Chrome. I tried opening same thing on a mobile android (4.0.3) browser and the value for (this.id) is not the same so the region I clicked on is not the one I get results for. The this.id of the object on the desktop is NOT equal to the this.id of the same object on the mobile browser.</p>

<p>I've verified the values by using alerts. What gives? How can I work around this or find the id of the clicked item in a more foolproof way?</p>

<p>Here's the snipped of code that matters:</p>

<pre><code>drawnl[i].click(function(){//click function

if(dcount == mcount){
    idx = (highestid-1-this.id); // this takes the total number of markets generated up to this point, subtracts the # of markets for this current map

}else if(gens &gt; 2){

    idx = (mcount-1)-((dcount + (gens-2))-(this.id)); // this takes the total number of markets generated up to this point, subtracts the # of markets for this current 

}else{
    idx = mcount-1-(dcount-this.id);
}   

}
</code></pre>

<p>I've confirmed that all other values are consistent except for when I grab this.id. I'm using the built-in handler from Raphael.js (<a href="http://raphaeljs.com/reference.html#Element.click" rel="nofollow">http://raphaeljs.com/reference.html#Element.click</a>)</p>
