SitePoint Sponsor

User Tag List

Results 1 to 14 of 14

Hybrid View

  1. #1
    SitePoint Wizard Stomme poes's Avatar
    Join Date
    Aug 2007
    Location
    Netherlands
    Posts
    10,279
    Mentioned
    51 Post(s)
    Tagged
    2 Thread(s)

    ENTER not triggering onclick() event, mouse is... why?

    Hallo all,
    I'm trying to rebuild/imitate another site in Javascript (mostly just to edumacate myself) and I've run into something.

    I have an absolutely-positioned anchor with an onclick event. If it's clicked, a hidden <select> appears and opens. The focus() is moved to this select immediately.

    I can arrow up and down through the select options, and I can click on any of those options with a mouse and trigger the onclick() event I've set on the options (I have also tried with setting the onclick event on the select itself, same problem). Hitting ENTER does not seem to trigger the event though (FF7/Debian for now). I have no idea why, since that should be the normal event in a dropdown select when the ENTER key is hit anyway, as far as I can tell.


    Am I wrong in this?

    Should I explicitly write an onkeyup and check for the Enter key and add an onclick there? (seems like overkill)

    Here is the code I'm working with:
    HTML
    Code:
              <label for="refineSelect" id="refine"><span>Refine term:</span> <a href="#void" id="refa"> </a>
                  <select id="refineSelect" name="refineSelect">
                    <option value="foo">Foo</option>
                    <option value="bar">Bar</option>
                    <optgroup label="-- Try on --">
                      <option value="amazon">Amazon</option>
                      <option value="bing">Images - Bing</option>
                      <option value="google">Images - Google</option>
                      <option value="maps">Maps</option>
                      <option value="news">News</option>
                      <option value="wikipedia">Wikipedia</option>
                      <option value="youtube">YouTube</option>
                    </optgroup>
                    <optgroup label="-- Show all --">
                      <option value="baz">Baz</option>
                      <option value="quux">Quux</option>
                    </optgroup>
                  </select>
                </label>
    I originally had the label outside the select and may move it back out; it was originally wrapped to try something else out. I don't think it matters here but maybe??

    The CSS isn't anything special, the anchor is absolutely positioned and so is the select.

    Javascript (currently leaving out the bits that are not part of this function):
    Code:
    (inside Object Foo)
    init: function() {
           var refineAnchor = document.getElementById('refa'),
                s = document.getElementById('refineSelect'),
                q = document.getElementById('q');
    
            Basis.addClass(s, 'hidden');
    
            Basis.addEventListener(refineAnchor, 'click', Foo.refineClickListener(s, q)); 
            Basis.addEventListener(s, 'blur', Foo.sBlurListener); 
    
    ...
        },
    ...
        showRefineSelect: function(s, q) {
            var opt;
            Basis.removeClass(s, 'hidden');
            s.size = s.length;
            //loop through s's options and add click listeners
            for(var i=0; i<s.options.length; i++) {
                opt = s.options[i];
                opt.onclick = (function(opt,s,q){
                    return function() {
                         Foo.submitParams(opt,s,q);
                     }
                })(opt,s,q);
            }
            s.focus();
        },
    
        submitParams: function(opt, s, q) {
            alert(q.nodeName + ', value is ' + q.value); //for now, my test to see that click event happened
        },
    
        hideRefineSelect: function(s) {
            s.size='1';
            Basis.addClass(s, 'hidden');
        },
           
    ...
        refineClickListener: function(s, q) {
            return function() {
                Foo.showRefineSelect(s, q);
            };
        },
    
        sBlurListener: function(event) {
            Foo.hideRefineSelect(this);
        }
    So, when the anchor gets a click event (works with mouse or Enter keys), the select dropdown appears and focus is automatically moved to it. This all works (so far, not widely tested).

    I can arrow around the options, which I want.

    I can click an option with the mouse and see the result of my click event that I've placed on the options.
    I cannot hit Enter and see the result of my click event. I see in my debugger that yes, each option is getting the click event assigned to it.

    Before adding click events to the options I had tried the simpler add-click-event-to-select. This hadn't worked originally which is why I thought maybe I needed to add directly to the options.

    Is there something I'm obviously missing here? My brain is in a fog.

    Also, I'm doing this partially to better learn Javascript. I don't care if there's some 500kb downloadable jQuery whatsit that does it all for me. That defeats the purpose really.

    Thanks,
    poes

  2. #2
    SitePoint Guru
    Join Date
    Sep 2006
    Posts
    731
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    The onclick event for <option>s is supported by Firefox but isn't standard. Clicking an option will trigger the onchange event.
    Tab-indentation is a crime against humanity.

  3. #3
    SitePoint Wizard Stomme poes's Avatar
    Join Date
    Aug 2007
    Location
    Netherlands
    Posts
    10,279
    Mentioned
    51 Post(s)
    Tagged
    2 Thread(s)
    The onclick event for <option>s is supported by Firefox but isn't standard. Clicking an option will trigger the onchange event.
    Hm, let me try onchange as my event then. Thanks.


    I also noticed while playing around with the loops that:
    -I can't add any more events (but maybe this is because the element doesn't support them in the first place?)
    -I can't get the event itself if I wanted to do something with it.

    But this I assume is all my not knowing how to correctly deal with loops and events.


    *edit no event works. However, I know someone managed to write this in Javascript because the real site does work, with Javascript. But the code is heavily obfuscated so I can't really see what they did.

  4. #4
    SitePoint Guru
    Join Date
    Sep 2006
    Posts
    731
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Stomme poes View Post
    Hm, let me try onchange as my event then.

    *edit no event works. However, I know someone managed to write this in Javascript because the real site does work, with Javascript. But the code is heavily obfuscated so I can't really see what they did.
    <option>s don't have event handlers. onchange/onclick event handlers should be applied to the <select> element.
    Tab-indentation is a crime against humanity.

  5. #5
    SitePoint Wizard Stomme poes's Avatar
    Join Date
    Aug 2007
    Location
    Netherlands
    Posts
    10,279
    Mentioned
    51 Post(s)
    Tagged
    2 Thread(s)
    Tried that too, the moment nothing happened on the options.

    If I use a cut-down, tutorial example, I can add an onchange event to a select and it acts as I expect, where I need to hit Enter to select my choice.

    But it doesn't seem to do anything within my code context.

    It could have to do with that I have the select first absolutely positioned and then forced open using size. Not sure.
    I tried a
    s.onchange = (function() {
    return function() {alert('foo bar baz');}
    })();

    and I get no response, while of course doing
    s.onchange = function() {alert('fuzzbazz');};
    had it going off the moment it opened.

    I'm going to see if I can get "normal" select behaviour without hiding it and letting it do what it would normally do, but then I'd have to figure out how to keep it working while hiding it away again.

  6. #6
    Non-Member Max Height's Avatar
    Join Date
    Dec 2011
    Posts
    303
    Mentioned
    6 Post(s)
    Tagged
    1 Thread(s)
    I've only had a quick look through your code ans post but I think you are over-scienceing what you are trying to do. Also, you talk about links but I don't see any in your html, so not sure what you are trying to do there.

    Perhaps try a new approach. Start from scratch with just a bare <select> with no styling and get it working - something like this:

    This code alerts the selected option and its value.


    Code:
            <select name="mySel" onchange="doThis(this);">
                <option value="1" selected="selected">option 1</option>
                <option value="2">option 2</option>
                <option value="3">option 3</option>
                <option value="4">option 4</option>
            </select>
    
            <script type="text/javascript">
                function doThis(selElem){
                    alert('You selected: '+selElem.options[selElem.selectedIndex].innerHTML+"\n"+'Selected value: '+selElem.value);
                }
            </script>
    First get the above basic <select> to work and then build on it in small steps and test it. Don't add anything new until each step works correctly. Basically try to KISS and test as you build the application.


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
  •