/    Sign up×
Community /Pin to ProfileBookmark

Use of href="javascript:myjscall()"

Copy linkTweet thisAlerts:
Dec 14.2007

Hi,

Seems that this syntax is out of favor and I have avoided using this syntax.

However, I have found that href and onclick behave differently while coding for ADA compliance (Americans with Disability Act).

The issue is with folks unable to use a mouse (Carpal Tunnel syndrome, etc?)

In this case, they tend to use tab to get to active elements, and press keyboard enter to activate the href.

If they hit enter when they are focused on a button, the href is used, onclick() is never called (I do have to set href-“#” so I can get focus).

I assume the href=”javascript:dosomething();” syntax would solve my problem.

So, how do I accommodate non-mouse users without the use of href=”javascript:”?

I guess I could do an onmousedown handler as well, and make sure the enter key is being pressed, but if it is OK to use href:javascript this seems to be a less messy solution.

Comments?
Larry

to post a comment
JavaScript

8 Comments(s) ↴

Copy linkTweet thisAlerts:
@toicontienDec 14.2007 — Make sure you've always got href="#" in the <a> tags. That makes them tabbable.
Copy linkTweet thisAlerts:
@LarryNH914authorDec 14.2007 — I did that.

I need the enter key, when the anchor is focused, to perform javascript.
Copy linkTweet thisAlerts:
@felgallDec 14.2007 — Unless you want the <a> tag to link to the top of the page don't use href="#" and never put JavaScript in the href as that then doesn't use an event trigger to run the code properly. If you are not linking somewhere then don't use an <a> tag. using onclick= in a span tag works just as well for running JavaScript when something is clicked on where you don't want to link to somehwere.
Copy linkTweet thisAlerts:
@toicontienDec 14.2007 — &lt;a [B]href="#"[/B] onclick="doSomething(); [B]return false;[/B]"&gt;JavaScript Link&lt;/a&gt;
When JavaScript is disabled, it will probably jump the user to the top of the page. With JS enabled, the "return false" portion of the onclick cancels the link click event.

If you really want to make it accessible, use an input of type button:
[code=html]<input type="button" value="Click Me" onclick="doSomething();">[/code]
That way with JavaScript disabled, clicking the button does absolutely nothing at all.

Edit: This solution is also keyboard accessible, whereas an onclick on a SPAN tag is not. Isn't keyboard accessibility one of the requirements?
Copy linkTweet thisAlerts:
@LarryNH914authorDec 18.2007 — the onclick() is only fired on a mouse click.

What does the user who cannot click a mouse do to fire the

event from a keyboard???

No mice events, unless there is a keyboard sequence that simulates a click on an anchor (note: <enter> does not fire the onclick event).

Sorry, can't use onclick.... What do I use?

Oh, the other problem with the suggested non-use of href= is that in IE7 (unlike firefox) you cannot set focus to an element that does not have a href... There is no "focus" box displayed if href is not specified as well.


Thanks,

Larry
Copy linkTweet thisAlerts:
@toicontienDec 18.2007 — the onclick() is only fired on a mouse click.

What does the user who cannot click a mouse do to fire the

event from a keyboard???

No mice events, unless there is a keyboard sequence that simulates a click on an anchor (note: <enter> does not fire the onclick event).

Sorry, can't use onclick.... What do I use?

Oh, the other problem with the suggested non-use of href= is that in IE7 (unlike firefox) you cannot set focus to an element that does not have a href... There is no "focus" box displayed if href is not specified as well.


Thanks,

Larry[/QUOTE]
Browser always used to trigger an onclick event if you pressed the ENTER key when the element had focus. The "#" in the href attribute allows you to tab to that link. Once that link has focus, pressing ENTER should trigger an onclick event. Is Internet Explorer 7 acting differently?

The code below should work universally for both mouse clicks and keyboard ENTER's:
&lt;a href="#" onclick="doSomething(); return false;"&gt;JavaScript Link&lt;/a&gt;
Copy linkTweet thisAlerts:
@Declan1991Dec 18.2007 — Works in Firefox and IE 7 no problem. The only other solution if that doesn't work, is that your (X)HTML/CSS/Javascript etc. it wrong.
Copy linkTweet thisAlerts:
@LarryNH914authorDec 19.2007 — The code I used to test was bad, the onclick is fired...

The problem is I am using image areas, and folks have required all sorts of mouse

actions, left click right click, etc...

So, I have a mousedown action defined.

That being said, looks like the code does do an onclick() even when a mousedown is defined... I have to see in the office why I thought the onclick never occurred. I can have the onclick event simulate a left mousedown event on the area, or evaluate the mousedown code...

Thanks,

Larry
×

Success!

Help @LarryNH914 spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 — BETA 5.18,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @AriseFacilitySolutions09,
tipped: article
amount: 1000 SATS,

tipper: @Yussuf4331,
tipped: article
amount: 1000 SATS,

tipper: @darkwebsites540,
tipped: article
amount: 10 SATS,
)...