May82013 by dcmNo Comments

Replicating a “mailto:” href When You Need to Return false From an Anchor Tag Click

JavaScript

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.

May12013 by dcmNo Comments

Omniture Calls Firing Twice When Returning False from Click Event

JavaScript

JavaScript LogoSometimes “return false” is not enough; you need to prevent the event from bubbling up the DOM

Problem:

While implementing new Omniture calls on a client’s mobile site today, I noticed that two Omniture calls were being fired each time the new social media buttons I had added where clicked. These buttons only fired the Omniture call once, but each time one was clicked, two Ominiture calls were firing. I know this could not be the right behavior. The previous developer had implemented zepto.js, so I wanted to be sure it was not an anomaly of zepto that was causing the problem.

Short Answer:

Instead of ending each click handler with “return false”, I had to do end it with:

Long Answer:

I noticed that when two Omniture calls were fired, they were not the same. One was the one I intended to call, and it was working perfectly. The other was more generic, and did not seem to understand what exatly was clicked. This led me to believe that there was a more generic event handler up the DOM somewhere, that was binding to any click, and firing off some general parameterss.

Yuck!

It turns out that someone had updated the Omniture library that was used, and they had bound a generic Omniture call to the anchor tag click event. Even though my click event returned false, the event bubbled up to wherever that generic event binding was. I found this StackOverflow post, and the answer provided was dead-on:

http://stackoverflow.com/questions/6207956/zepto-js-doesnt-return-false

So my click handler went from this:

…to this:

Summary:

I just needed to kill the event bubbling, and prevent the default behaviour, and everything worked just fine.