SitePoint Sponsor

User Tag List

Results 1 to 11 of 11
  1. #1
    SitePoint Wizard Bill Posters's Avatar
    Join Date
    Dec 2001
    Location
    UK
    Posts
    1,523
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    js events in item or create <a> tag?

    I recently read here at SPF a comment stating that using <a> tags to facilitate javascript events was a bad way of doing it.

    Given that browsers have long since been able to attach a range of javascript events to almost any object, why are we still predominantly using <a> tags to house them?

    Both options have their good points and bad points. So which should we be using?

    <a href="#" onmouse...>...</a> tags (or equivalent)

    ...or the more modern (and potentially more efficient) way...

    <img onmouse... ...style="cursor: pointer;">

    Imho, this option still *needs* the CSS pointer to reinstate the familiar pointer that we associate with links.


    Are there any plans afoot to enable the pointer cursor natively for objects containing onclick and onmouse events?

    Given that the <a> tag option requires the creation of extra tags and the more modern option requires extra styling to recreate basic usability features- which is the 'correct' way?
    Last edited by Bill Posters; Apr 30, 2002 at 23:40.
    New Plastic Arts: Visual Communication | DesignateOnline

    Mate went to NY and all he got me was this lousy signature

  2. #2
    What? Maelstrom's Avatar
    Join Date
    Oct 2001
    Location
    Whistler BC originally from Guelph Ontario
    Posts
    2,175
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Nope...using the proper ways to facilitate an event isn't bad...this is bad

    <a href="javascript:function()">link</a>

    I always cry when I see this...it works...but that is not what href is meant to do...it is far cleaner to use onclick...besides there are bugs in earlier browsers that dont accept the click when you use href.

    Now...as for doing something as simple as a point or background color...I would definately use css...more efficient and looks better. Probably faster to due to the natural inheritance of css.
    Maelstrom Personal - Apparition Visions
    Development - PhP || Mysql || Zend || Devshed
    Unix - FreeBSD || FreeBsdForums || Man Pages
    They made me a sitepoint Mentor - Feel free to PM me or Email me and I will see if I can help.

  3. #3
    SitePoint Zealot
    Join Date
    Aug 2001
    Location
    DC
    Posts
    113
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Originally posted by Maelstrom
    Nope...using the proper ways to facilitate an event isn't bad...this is bad

    <a href="javascript:function()">link</a>

    I always cry when I see this...it works...but that is not what href is meant to do...it is far cleaner to use onclick...besides there are bugs in earlier browsers that dont accept the click when you use href.
    Curious, why is that wrong? I'm not sure what you are saying about older browsers but I do remember having trouble back-in-the-day because some browsers did not recognize the "onClick" event for <a> elements.

    I understand what you are saying, but if you don't need to execute anything but the script, then what's wrong with calling it through the link itself? Hell, if it wasn't meant to do that then why do they offer special notation of "javascript: . . . " when calling a script via a URL link? What do you usually put for the URL if you want to only execute a script via a URL link?

    Is using CSS for this functionality buggy? I know a lot of the rest of the spec is. To me, the other way may be more viable at this point? I'm not an expert on this nor have I used CSS in this capacity though. I wouldn't go using bleading edge technology on a site unless you really know your users and their browser capabilities.
    Last edited by Buchanp; Apr 30, 2002 at 23:22.
    signature

  4. #4
    SitePoint Wizard Bill Posters's Avatar
    Join Date
    Dec 2001
    Location
    UK
    Posts
    1,523
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    What do you mean by 'bleeding edge technology'?

    According to the figures, both <img> and <div> (two tags that have a particular prominence to my site) have supported the use of direct javascript events since version 3 browsers and were part of the W3C HTML spec (with event support) at version 3.2

    Many of us are moving away from building with one eye on Netscape 4. I doubt there can be more than a handful out there building with one eye on Netscape/IE 2.

    This is why I am confused about the reasons we still create ad hoc <a> tags solely to make an image into a button.

    I notice that DW differentiates between v3 and v4+ and acknowledges that in modern browsers events 'belong' in the tag of the item being affected, not in a purpose-built set of <a> tags.

    (Having said that, BBEdit (my preferred under-the-bonnet workhorse) doesn't apply its usual colour-coding to javascripts that aren't placed in <a> tags.)

    So, what of the direct method?
    Given that it places events where they should be, wouldn't it be correct to consider that as the superior method? (give or take the odd lack of a pointer cursor)
    Last edited by Bill Posters; May 2, 2002 at 00:42.
    New Plastic Arts: Visual Communication | DesignateOnline

    Mate went to NY and all he got me was this lousy signature

  5. #5
    Currently Occupied; Till Sunda Andrew-J2000's Avatar
    Join Date
    Aug 2001
    Location
    London
    Posts
    2,475
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I recently read here at SPF a comment stating that using <a> tags to facilitate javascript events was a bad way of doing it.


    why?, <a title="js" href="javascript:void(0)">click</a>

    simply puts this in the locationbar, im not sure about compatibility (i havent found a problem with this yet) and due to this reason it has made it easier to exploit websites. Does this work in netscape?

    The problem with people + the internet is that they have stuck to there ancient browsers, and have either never heard of an update or know where to find it lol. Microsoft have helped out lately by allowing auto updates etc.

    defin:technology (http://encarta.msn.co.uk/find/Concis...2&ti=761557685).

    Many of us are moving away from building with one eye on Netscape 4. I doubt there can be more than a handful out there building with one eye on Netscape/IE 3.
    hopefully not, leading to people to update there browsers

    This is why I am confused about the reasons we still create ad hoc <a> tags solely to make an image into a button.
    i'm not sure what you mean by that, but if your refering to using a single tag to make imgs into buttons?

    what would you prefer

    <input type="image" imgsrc="blah.jps" src="blah.htm" size... />

    <a href="targ.html" target="_self"><img alt="missing" title="img" src="img.jpg"></a>

    the second one makes more sense to me, say you want text inside or a marquee or any formating/other attributes.

    check out the link attribute in javascript as well
    http://www.devguru.com/Technologies/...kref/href.html

    So, what of the direct method? (what do you mean?)

    you can still change the cursor type on links with stylesheets?

  6. #6
    SitePoint Wizard Bill Posters's Avatar
    Join Date
    Dec 2001
    Location
    UK
    Posts
    1,523
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Sorry, my bad.

    I didn't mean 'button' (form object), I just meant it in terms of an image link (standard object)

    As an example, I am comparing the comparative value of...

    <a href="#" onclick="window.location='next.html'"><img src="next.gif"></a>

    against...

    <img src="next.gif" onclick="window.location='next.html'">

    The latter is what I would refer to as the 'direct' method.
    It is also the option that I would consider to be most correct.
    I already use this method in conjunction with the CSS cursor attribute in my own site.

    I am questioning why it is not the default method for all web-designers and developers.
    New Plastic Arts: Visual Communication | DesignateOnline

    Mate went to NY and all he got me was this lousy signature

  7. #7
    Currently Occupied; Till Sunda Andrew-J2000's Avatar
    Join Date
    Aug 2001
    Location
    London
    Posts
    2,475
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    well what happens if javascript is disabled the second method will not work and by the time you include

    style="cursor:hand;"

    it will be just as long as the short hand method you have put

  8. #8
    SitePoint Wizard Bill Posters's Avatar
    Join Date
    Dec 2001
    Location
    UK
    Posts
    1,523
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    But surely, if javascript is disabled, then neither of the options above will work.

    If the only link url you have without the javascript instruction is #, then either way, if you have javascript off- you're going nowhere.

    or am I missing something?

    Regarding the shorthand/longhand thing.

    I was more talking from a 'keeping content separate from styling separate from...' position.

    The second option is surely more sympathetic to the principles behind W3C standards.
    The creation of a tag for the sole purpose of making another element between those tags clickable seems to countermand the principles of efficient coding.

    Agreed, the neccessary inclusion of the cursor attribute to 'mimic' a basic usability feature shows it's not quite there yet.
    However, surely this option is further along the path on which we are and should be moving than the other and still more widely used option of creating <a> tags.
    New Plastic Arts: Visual Communication | DesignateOnline

    Mate went to NY and all he got me was this lousy signature

  9. #9
    What? Maelstrom's Avatar
    Join Date
    Oct 2001
    Location
    Whistler BC originally from Guelph Ontario
    Posts
    2,175
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Bill Posters, out of pure efficiency the second is better. If you have no interest in coding for previous versions than drop the redundancy of creating the link AND graphic.

    As for the use of href. It just wasn't meant to do that. the javascript adding is simply a hack. At least from what I have read. And there is a bug. Have you even been on a site and had to click a couple of time to activate the link. I am willing to bet that it is usually href=javascript:function(). Why not use events in the proper manner. It will work, and be proper even handling ettiqutte
    Maelstrom Personal - Apparition Visions
    Development - PhP || Mysql || Zend || Devshed
    Unix - FreeBSD || FreeBsdForums || Man Pages
    They made me a sitepoint Mentor - Feel free to PM me or Email me and I will see if I can help.

  10. #10
    SitePoint Wizard Bill Posters's Avatar
    Join Date
    Dec 2001
    Location
    UK
    Posts
    1,523
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Originally posted by Maelstrom
    Bill Posters, out of pure efficiency the second is better. If you have no interest in coding for previous versions than drop the redundancy of creating the link AND graphic.
    But as I said above, the backward compatibility of using the direct method reaches back to include version 3 of the big two browsers.
    DIVs and IMGs became directly clickable in the W3C HTML 3.2 standard (according to W3Schools).
    Given how far back support for this method already natively reaches I would say that the backward compatibility of this method is not even in question.

    (fwiw, the few sites I build are done to standards. I take this position as it would seem the best approach for someone who is only now develeoping their web-design abilities providing a more future-proof set of skills than learning to code for a set of browsers that will no longer be in use by time I put my skills to a 'full-time' test.
    The fact that this approach conveniently coincides with v5+ browsers which can handle the dhtml that I so love to play with is an added bonus .
    Incidentally, doing so doesn't exclude elements of my target audience.)



    Aside from the efficiency of the code, what 'should' be the most used method from a professional practice and W3C perspective.
    My understanding of the W3C philosophy may not be completely correct or at least may not be the same as someone else's.
    Would the professional and W3C perspectives not be the same in this case?

    Am I right or wrong in thinking that the direct method is the one most likely to become the default in the (foreseeable) future?
    Imho, it should already be the default given that the alternatives have no benefits beyond the fact that they work.
    The practice of using <a> tags in such cases resembles a workaround more than a legitimate, recommendable method.

    Sorry if I'm being a bit dogged about this, I'm just looking to bounce ideas off some pros in order to work out some kind of definitive answer (or to get as close as possible to one).



    p.s. I just noticed that this was my 400th post.
    Last edited by Bill Posters; May 2, 2002 at 01:47.
    New Plastic Arts: Visual Communication | DesignateOnline

    Mate went to NY and all he got me was this lousy signature

  11. #11
    What? Maelstrom's Avatar
    Join Date
    Oct 2001
    Location
    Whistler BC originally from Guelph Ontario
    Posts
    2,175
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Originally posted by Bill Posters


    But as I said above, the backward compatibility of using the direct method reaches back to include version 3 of the big two browsers.
    DIVs and IMGs became directly clickable in the W3C HTML 3.2 standard (according to W3Schools).
    Given how far back support for this method already natively reaches I would say that the backward compatibility of this method is not even in question.
    You are correct. But being of standard and working are 7 different things. To this day somethings that are suppost to be standards don't work properly. But yes I do agree that <a> is a redundancy in this case but it is tradition that whenver a link is required to mark it up with <a> and not simply an onclick


    Aside from the efficiency of the code, what 'should' be the most used method from a professional practice and W3C perspective.
    My understanding of the W3C philosophy may not be completely correct or at least may not be the same as someone else's.
    Would the professional and W3C perspectives not be the same in this case?
    More people are trying to find efficient ways to do things. And while the second is the most efficient it isn't what is done. I think this is part tradition and part 'that is what the <a> tag is suppost to do, onclick may do it fine but it isn't marked up right'.


    Am I right or wrong in thinking that the direct method is the one most likely to become the default in the (foreseeable) future?
    Imho, it should already be the default given that the alternatives have no benefits beyond the fact that they work.
    The practice of using <a> tags in such cases resembles a workaround more than a legitimate, recommendable method.
    Hmmm, we will have to see. It may be dropped as a standard. I generally don't use graphics as links anymore. But when I do imagemaps I always use the onclick method.

    At least when calling functions in javascript. I would never use the second method when going to a regular link.

    But I can say this. I am just sitting here thinking about this. If I am doing a traditional link I always use <a> tags.

    [RULE]
    If I am calling a function I always use the onclick in the element I want to capture it. Not by surrounding it in another element (<a>) and capturing the event for that.
    [/RULE]

    I think that is your best rule of thumb. This way if you want a row to capture a click and run a function

    <td onclick="function()">link</a>

    instead of

    <td><a href="javascript:void(0)" onclick="function()" style="width:100%">Link</a></td>

    I think you will find that rule applys in most situations. Both work fine but one works so much better and looks so much better
    Maelstrom Personal - Apparition Visions
    Development - PhP || Mysql || Zend || Devshed
    Unix - FreeBSD || FreeBsdForums || Man Pages
    They made me a sitepoint Mentor - Feel free to PM me or Email me and I will see if I can help.


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •