using href="#" vs href="javascript:func()" ?

Discussion in 'Javascript' started by kelvlam, Jul 17, 2006.

  1. kelvlam

    kelvlam Guest

    Hello,

    I'm a new begininer with JavaScript. I'm trying to figure out which is
    the best approach, and to understand the differences between them.

    I have a <A> element that's suppose to either launch a popup window, or
    it will link you to some dynamic created page.

    I have declared a global JavaScript function

    function showStatus(sMsg)
    {
    window.status = sMsg ;
    return true ;
    }


    I know there are 3 ways to create this <A> tag

    Option 1)
    <a id="element1" href="#"
    onClick="launchLink(this)"
    onMouseOut="return showStatus('')"
    onMouseOver="return showStatus('{$positions}')">

    This option seem to be the simpliest. But if say I scrolled to the
    middle of a page, click the link, the entire page will jump to top.
    This kind of page-juggling is undesirable.


    Option 2)
    <a id="element1" href="javascript:launchLink(this)"
    onMouseOut="return showStatus('')"
    onMouseOver="return showStatus('{$positions}')">

    This seem to work fine, but some like the "this" that I pass into the
    javascript function, isn't the same as the "this" in option 1. I seem
    to have a difficult problem manipulating the element inside the
    JavaScript and DOM.


    Option 3)
    <a id="element1" href="javascript:void(0)"
    onClick="launchLink(this)"
    onMouseOut="return showStatus('')"
    onMouseOver="return showStatus('{$positions}')">

    This seem to yield the same result as option, but without the page
    juggling. The "this" passed into the javascript seem to behave the
    same as option 1 also. So far this is my pick.


    Can some JavaScript expert and Guru shed some light to this newbie
    please? :)

    Much appreciated for any pointer or advice.

    --
    Kelvin
    kelvlam, Jul 17, 2006
    #1
    1. Advertising

  2. kelvlam

    Randy Webb Guest

    kelvlam said the following on 7/17/2006 5:19 PM:
    > Hello,
    >
    > I'm a new begininer with JavaScript. I'm trying to figure out which is
    > the best approach, and to understand the differences between them.


    Did you try finding an FAQ for this group? This question is covered in it.

    <URL: http://jibbering.com/faq/#FAQ4_24>

    > I have a <A> element that's suppose to either launch a popup window, or
    > it will link you to some dynamic created page.
    >
    > I have declared a global JavaScript function
    >
    > function showStatus(sMsg)
    > {
    > window.status = sMsg ;
    > return true ;
    > }


    What makes you think that function does anything?

    >
    > I know there are 3 ways to create this <A> tag


    There is, at least, one more way.


    <snip>

    > Can some JavaScript expert and Guru shed some light to this newbie
    > please? :)


    See Above.

    --
    Randy
    comp.lang.javascript FAQ - http://jibbering.com/faq & newsgroup weekly
    Temporarily at: http://members.aol.com/_ht_a/hikksnotathome/cljfaq/
    Javascript Best Practices - http://www.JavascriptToolbox.com/bestpractices/
    Randy Webb, Jul 17, 2006
    #2
    1. Advertising

  3. kelvlam

    kelvlam Guest

    Sorry I haven't read through the FAQ. I will do so now.

    I also found a link that I read upon, and I found it quite helpful for
    myself to understand this issue --
    http://www.quirksmode.org/js/this.html

    Thanks for the pointer.

    --
    Kelvin

    Randy Webb wrote:
    > kelvlam said the following on 7/17/2006 5:19 PM:
    > > Hello,
    > >
    > > I'm a new begininer with JavaScript. I'm trying to figure out which is
    > > the best approach, and to understand the differences between them.

    >
    > Did you try finding an FAQ for this group? This question is covered in it.
    >
    > <URL: http://jibbering.com/faq/#FAQ4_24>
    >
    > > I have a <A> element that's suppose to either launch a popup window, or
    > > it will link you to some dynamic created page.
    > >
    > > I have declared a global JavaScript function
    > >
    > > function showStatus(sMsg)
    > > {
    > > window.status = sMsg ;
    > > return true ;
    > > }

    >
    > What makes you think that function does anything?
    >
    > >
    > > I know there are 3 ways to create this <A> tag

    >
    > There is, at least, one more way.
    >
    >
    > <snip>
    >
    > > Can some JavaScript expert and Guru shed some light to this newbie
    > > please? :)

    >
    > See Above.
    >
    > --
    > Randy
    > comp.lang.javascript FAQ - http://jibbering.com/faq & newsgroup weekly
    > Temporarily at: http://members.aol.com/_ht_a/hikksnotathome/cljfaq/
    > Javascript Best Practices - http://www.JavascriptToolbox.com/bestpractices/
    kelvlam, Jul 17, 2006
    #3
  4. kelvlam

    RobG Guest

    kelvlam wrote:
    > Sorry I haven't read through the FAQ. I will do so now.


    Please don't top post in com.lang.javascript.


    > I also found a link that I read upon, and I found it quite helpful for
    > myself to understand this issue --
    > http://www.quirksmode.org/js/this.html


    As much as I like Peter-Paul's stuff, I think his explanation of 'this'
    in that article could be better. Try these Mike Winters posts:

    <URL:http://groups.google.com/group/comp.lang.javascript/browse_frm/thread/ff83b4ef623fd826/d0719ae5667a7ad8?q=mike+winter+this+object+scope+chain&rnum=10#d0719ae5667a7ad8>
    <URL:http://groups.google.com/group/comp.lang.javascript/browse_frm/thread/27beecb64c504859/28e16b48661bf7e2?lnk=st&q=mike+winter+%22this+operator%22+object+scope+chain&rnum=1#28e16b48661bf7e2>

    Or this search:
    <URL:http://groups.google.co.uk/groups/search?q=group%3Acomp.lang.javascript+%22this+operator%22+%7C+%22this+refers+%7C+references%22>


    --
    Rob
    RobG, Jul 18, 2006
    #4
  5. kelvlam

    kelvlam Guest

    RobG wrote:
    > kelvlam wrote:
    > > Sorry I haven't read through the FAQ. I will do so now.

    >
    > Please don't top post in com.lang.javascript.
    >
    >
    > > I also found a link that I read upon, and I found it quite helpful for
    > > myself to understand this issue --
    > > http://www.quirksmode.org/js/this.html

    >
    > As much as I like Peter-Paul's stuff, I think his explanation of 'this'
    > in that article could be better. Try these Mike Winters posts:
    >
    > <URL:http://groups.google.com/group/comp.lang.javascript/browse_frm/thread/ff83b4ef623fd826/d0719ae5667a7ad8?q=mike+winter+this+object+scope+chain&rnum=10#d0719ae5667a7ad8>
    > <URL:http://groups.google.com/group/comp.lang.javascript/browse_frm/thread/27beecb64c504859/28e16b48661bf7e2?lnk=st&q=mike+winter+%22this+operator%22+object+scope+chain&rnum=1#28e16b48661bf7e2>
    >
    > Or this search:
    > <URL:http://groups.google.co.uk/groups/search?q=group%3Acomp.lang.javascript+%22this+operator%22+%7C+%22this+refers+%7C+references%22>
    >
    >
    > --
    > Rob


    Still newbie with this usergroup. I won't top-post anymore :)

    I read through the FAQ, the top-ten web-design mistake
    (http://www.useit.com/alertbox/20021223.html) and the best practice
    list (http://www.javascripttoolbox.com/bestpractices/), I am crossing
    my finger that I'm not re-asking the same question.

    I know using pseudo-javascript protocol is bad, so I tried the
    following

    <a
    title="{document(concat($languageDisplay,'.xml'))/Nexa/execution_detail}"
    href="blank.html"
    onclick="return openDetail(this)"
    onmouseout="return showStatus('');"
    onmouseover="return showStatus('get detail');">Detail</a>

    When my mouse over and mouse out, I am able to show the appropriate
    text in the browser status window. But I always want to replace the
    status bar text when the user click on the hyperlink. Currently if I
    click, it'll show "http://blah/blank.html" in the status bar.

    Which particular even should I be capturing in order to achieve this
    feature?

    Thanks again
    --
    Kelvin
    kelvlam, Jul 18, 2006
    #5
  6. kelvlam

    RobG Guest

    kelvlam wrote:

    [...]
    > Still newbie with this usergroup. I won't top-post anymore :)


    Cool.


    > I read through the FAQ, the top-ten web-design mistake
    > (http://www.useit.com/alertbox/20021223.html) and the best practice
    > list (http://www.javascripttoolbox.com/bestpractices/), I am crossing
    > my finger that I'm not re-asking the same question.
    >
    > I know using pseudo-javascript protocol is bad, so I tried the
    > following


    The JavaScript pseudo-protocol. :)

    It refers to entering "javascript:" instead of say "http:" as the
    protocol in the URL.

    Going back to your original question, the usual deal is to put a real
    URL in the href attribute, then use the onclick attribute to call your
    script and return false to cancel the href navigation if the script
    successfully completed.


    > <a
    > title="{document(concat($languageDisplay,'.xml'))/Nexa/execution_detail}"
    > href="blank.html"
    > onclick="return openDetail(this)"
    > onmouseout="return showStatus('');"
    > onmouseover="return showStatus('get detail');">Detail</a>
    >
    > When my mouse over and mouse out, I am able to show the appropriate
    > text in the browser status window. But I always want to replace the
    > status bar text when the user click on the hyperlink. Currently if I
    > click, it'll show "http://blah/blank.html" in the status bar.


    What is shown in status bar depends on the browser and how it's
    configured. Whether the bar is displayed or not, and whether you can
    modify what it displays, is user configurable in most browsers. Some
    don't show it at all by default (e.g. Safari), others show what the
    href resolves to, still others things like 'Will open blank.html in a
    new window'.


    > Which particular even should I be capturing in order to achieve this
    > feature?


    Don't try. Leave the status bar alone, most browsers can prevent you
    from setting its value anyway and do so by default (I'm pretty sure
    Firefox is one).

    --
    Rob
    RobG, Jul 18, 2006
    #6
  7. kelvlam

    kelvlam Guest

    RobG wrote:
    > kelvlam wrote:
    >
    > [...]
    > > Still newbie with this usergroup. I won't top-post anymore :)

    >
    > Cool.
    >
    >
    > > I read through the FAQ, the top-ten web-design mistake
    > > (http://www.useit.com/alertbox/20021223.html) and the best practice
    > > list (http://www.javascripttoolbox.com/bestpractices/), I am crossing
    > > my finger that I'm not re-asking the same question.
    > >
    > > I know using pseudo-javascript protocol is bad, so I tried the
    > > following

    >
    > The JavaScript pseudo-protocol. :)
    >
    > It refers to entering "javascript:" instead of say "http:" as the
    > protocol in the URL.
    >
    > Going back to your original question, the usual deal is to put a real
    > URL in the href attribute, then use the onclick attribute to call your
    > script and return false to cancel the href navigation if the script
    > successfully completed.
    >
    >
    > > <a
    > > title="{document(concat($languageDisplay,'.xml'))/Nexa/execution_detail}"
    > > href="blank.html"
    > > onclick="return openDetail(this)"
    > > onmouseout="return showStatus('');"
    > > onmouseover="return showStatus('get detail');">Detail</a>
    > >
    > > When my mouse over and mouse out, I am able to show the appropriate
    > > text in the browser status window. But I always want to replace the
    > > status bar text when the user click on the hyperlink. Currently if I
    > > click, it'll show "http://blah/blank.html" in the status bar.

    >
    > What is shown in status bar depends on the browser and how it's
    > configured. Whether the bar is displayed or not, and whether you can
    > modify what it displays, is user configurable in most browsers. Some
    > don't show it at all by default (e.g. Safari), others show what the
    > href resolves to, still others things like 'Will open blank.html in a
    > new window'.
    >
    >
    > > Which particular even should I be capturing in order to achieve this
    > > feature?

    >
    > Don't try. Leave the status bar alone, most browsers can prevent you
    > from setting its value anyway and do so by default (I'm pretty sure
    > Firefox is one).
    >
    > --
    > Rob


    Rob,

    Thanks for the response. After searching this usergroup in google for
    "window.status", then I realize it's more-or-less now out of the
    programmer control, because it's being overwrite by the browser.
    Firefox and IE7 both have it default disable for the script to modify
    the status bar.

    I guess I will just put something meaningful like "redirect.html" in
    the HREF, so when the user mouse-over the link, the status won't show
    my long dynamic page request query string, but just
    "http://blah/redirect.html" instead.

    Much appreciate your help!

    Kelvin
    kelvlam, Jul 18, 2006
    #7
    1. Advertising

Want to reply to this thread or ask your own question?

It takes just 2 minutes to sign up (and it's free!). Just click the sign up button to choose a username and then you can ask your own questions on the forum.
Similar Threads
  1. Roberto Gallo
    Replies:
    3
    Views:
    476
    Thomas Fritsch
    Feb 20, 2004
  2. CRON
    Replies:
    24
    Views:
    200,479
    Adrienne Boswell
    Jun 20, 2006
  3. Soren Vejrum
    Replies:
    4
    Views:
    533
    Lasse Reichstein Nielsen
    Jul 5, 2003
  4. saiho.yuen
    Replies:
    3
    Views:
    411
    kaeli
    Sep 14, 2004
  5. Replies:
    2
    Views:
    445
Loading...

Share This Page