dslreports logo
 
    All Forums Hot Topics Gallery
spc
Search similar:


uniqs
1778

Martinus
Premium Member
join:2001-08-06
EU

Martinus

Premium Member

javascript onclick

I know using onclick in links is frowned upon but I've "inherited" a Web app on which I have to do some maintenance. I have no problem with the backend.

There is a mixture of links that open popups, etc and these are in the kind of:

a)
<a href="#" onclick="openpopup('someargument')">Click here</a>
 
or

b)
<a href="javascript:openpopup('someargument')">Click here</a>
 

I am not ready yet to put jQuery and put all this stuf in $(document).ready() but I would like to normalize all these links so I can find them easier later on.

So, which would be the preferred method? a or b?

Also, if using a, what would be best?

<a href="#" onclick="openpopup('someargument'); return false">Click here</a>
 

or

<a href="#" onclick="return openpopup('someargument')">Click here</a>
 

Many thanks
Martinus

Ashke
Flips page and continues reading
Premium Member
join:2007-09-11
Minneapolis, MN

1 recommendation

Ashke

Premium Member

Okay, Martinus...

It seems you want to use JavaScript to open a popup. I tend to use the following:

You can use one example, but look at how I lay it out.

<a href="someLink" onclick="javascript:alert('someArgument');">Click Here</a>
<a href="someLink" onclick="javascript:confirm('someArgument');">Click Here</a>
<a href="someLink" onclick="javascript:prompt('someArgument');">Click Here</a>
 

And for the record... you can use javascript, java, html, xhtml, dhtml, etc... for the code. But be sure the code type is in lowercase. Example:

[ code = xhtml ] (with no spaces)

Martinus
Premium Member
join:2001-08-06
EU

Martinus

Premium Member

Thanks, Ashke See Profile

These links open popup windows. The arguments are URLs which are usually pictures or small help docs. And they work.

My idea is to replace these popups with jQuery and ThickBox. But I can't do that at this stage.

What I would like to know is which is the preferred method of the ones mentioned in my post.

Ashke
Flips page and continues reading
Premium Member
join:2007-09-11
Minneapolis, MN

Ashke

Premium Member

I would say start with "javascript:

JAAulde
Web Developer
MVM
join:2001-05-09
Frederick, MD
ARRIS SB6141
Ubiquiti EdgeRouter Lite
Ubiquiti UniFi AP

1 edit

1 recommendation

JAAulde to Martinus

MVM

to Martinus
Martinus See Profile, I would do the following:
<a href="http://www.dslreports.com/" onclick="return openpopup( this.href );">Click here</a>
 

This way your links are real, yet are being taken over by JS to execute your preferred behavior. This also gets you better prepared to later remove the offending hardcoded onclicks.

As for the second part of your question, I wouldn't sweat it too hard either way. Some of it depends on the function you're calling in the onclick and its purpose, other usages, and return value. If you know your function is always going to return false, I'd probably stick with the second option listed in the second portion of your question.

Ashke See Profile, just so you know the javascript pseudo protocol really shouldn't be used in an event handler such as onclick.

Edit: Martinus See Profile, my example is assuming you're opening a URL in a popup window. If you have other onclick code you're executing, I'd move it from using an A tag to something like a SPAN or BUTTON which you style to attract attention to the action.

Martinus
Premium Member
join:2001-08-06
EU

Martinus

Premium Member

Thanks, JAAulde See Profile. That's what I was looking for.
said by JAAulde:

...Some of it depends on the function you're calling in the onclick and its purpose, other usages, and return value. If you know your function is always going to return false, I'd probably stick with the second option listed in the second portion of your question.
So, opening a popup window should always return false? In which case would an onclick event return true or you would want it to return true - or a value?

JAAulde
Web Developer
MVM
join:2001-05-09
Frederick, MD
ARRIS SB6141
Ubiquiti EdgeRouter Lite
Ubiquiti UniFi AP

1 recommendation

JAAulde

MVM

The purpose of returning false when an event is handled is to avoid propagating the event through the event chain. Allowing the event to propagate would allow the objects default action to take place.

So in the case of a link which you want to open in a new window, if you didn't return false, the window would open and the event would continue propagating until the default behavior of an A object is fired. Since that default behavior is to send your browser to a new page, the original window would go to whatever is in the href tag, and the new window would be open to where you aimed your function.
Graycode
join:2006-04-17

1 recommendation

Graycode to Martinus

Member

to Martinus
I like what JAAulde See Profile explained about the onClick. I would probably just use '#' as the target.

<a href="#" onclick="return openpopup('someargument')">Click here</a>
 
or
<a href="#" onclick="openpopup('someargument'),return false">Click here</a>
 

I you had to use the <a href="javascript: method then you also need to surround the script portion with void(). Otherwise the script will run to create the popup and also some browsers will be confused about what to do next with its events. Using void() avoids the problem. Note that void() returns neither true nor false, think of it as nothing.

<a href="javascript:void(openpopup('someargument'))">Click here</a>
 

Martinus
Premium Member
join:2001-08-06
EU

Martinus

Premium Member

Thanks, Graycode See Profile
said by Graycode:

I like what JAAulde See Profile explained about the onClick. I would probably just use '#' as the target.

<a href="#" onclick="return openpopup('someargument')">Click here</a>
 

Agree. I guess I'll do it this way.

PingPong3
join:2001-02-02
Overhere, HI

PingPong3

Member

"#" puts an anchor in your browser's location though... href="javascript:void(0)" is the second best way, after putting an actual url in there and returning false onclick (yea void() needs a bool argument).

I find it a bit annoying that some people put "javascript:" in onclick since it's a protocol for url's... =p

JAAulde
Web Developer
MVM
join:2001-05-09
Frederick, MD
ARRIS SB6141
Ubiquiti EdgeRouter Lite
Ubiquiti UniFi AP

JAAulde

MVM

Yeah, using the javascript pseudo protocol in event handlers is silly. And really, it's very outdated to use it in an href attribute. It still serves a purpose here and there, but it in almost every case it's required due to lack of "semantic" document structure in the markup.

An anchor (A) tag should be used only where its basic behavior would make sense if JS didn't take anything over. Thus my recommendation of using a real URL in the href attribute. Appended or overriding behavior should then be injected into the document via the language of choice, which language should take advantage of the semantic markup to minimize the amount of work it has to accomplish.

Using # or void() as the href of a link which should open a URL in a new window is hackish, requires more work on your part, often produce non-accessible pages, etc, etc, etc

Tenar
join:2008-01-02
Midland, ON

1 recommendation

Tenar to Martinus

Member

to Martinus
I agree with JAAulde that a good philosophy is to use unobtrusive javascript. Leave the links as regular links and use external javascript files to apply the event action.

This way, bots and browsers without javascript see:

<a href="somepage.htm">Click here</a>
 

While most visitors will get the popup action that is applied by targeting the link and assigning an onclick event in your external file.

Martinus
Premium Member
join:2001-08-06
EU

Martinus

Premium Member

Thanks, everybody!!!

OK. I'll be using this one:

<a href="http://www.dslreports.com/" onclick="return openpopup( this.href );">Click here</a>
 

It will be temporary though as my plan is to replace all these popups with ThickBox or similar. I like ThickBox for its ability to display different types of content.