JavaScript LogoYou have an anchor tag, the href is a “mailto”, but what if you can’t have the hyper link follow?

Problem:

You need to have a “mailto:” click event, but you have to (for whatever reason) return false or otherwise prevent the actual click event’s default behavior.

Short Answer: On that element’s click event: window.location = “mailto:?subject=XXX…”;

Long Answer (with long story prepended) :

I recently added some social networking buttons to a client’s mobile site, one of which was an old-school “mailto:” anchor tag. No big deal, right?

Well… sort of.

I was testing the deployment in their DEV environment and everything was peachy. And then all of a sudden, nothing worked. Needless to say, I was banging my head against my cubicle for about 20 minutes. I hadn’t made any changes, but suddenly nothing worked. When I calmed down and inspected the live DOM, I could see that my nice long “mailto:?subject=BLAH BLAH BLAH…” href value was very much in-tact on page load, but when I clicked the anchor tag, everything after the “mailto:” disappeared. The result was a new window with simply “mailto:” in the address bar. I tried this over and over (and over). Same thing. HREF valule is fine on page load, but on click, the query string is stripped out.

WTF?

Another 20 minutes of cubicle head-banging, and then I realized that someone had “upgraded” the Omniture library that the page was pulling in. I won’t bore you with the details, but in short, any anchor tag in the page was checked on a click event, and if it had a query string, the query string was removed.

Ugggghhhhh….

I wasted a good half hour trying to get around this, but no matter what I did, that query string got stripped off. Then I wasted another 20 minutes with a plan to create a new anchor element on every click, give it the same “mailto:?subject=BLAH BLAH BLAH…” href value, never append it to the DOM, and just trigger its click event when the original element was clicked.

Dumb Idea.

After a little poking around, I found this little gem:

For that problem elements click event, just do the following:

Nice.