SitePoint Sponsor

User Tag List

Results 1 to 14 of 14
  1. #1
    SitePoint Zealot ThetaWaveRider's Avatar
    Join Date
    Aug 2004
    Posts
    112
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Disabling mouse scrolling in IE <select> field

    IE6 has a "feature" that allows a user to select an option in a <select> field with the mouse wheel by scrolling to it. Problem is, if the user does not remove focus from this field and tries to scroll the page, the user inadvertently scrolls the <select> field option to a new one.

    The solution to the problem seemed to be to test for mouse events when the <select> field had focus, and if the event was a mouse-button press, only allow it if it is a standard click. Problem with this is, (1) scrolling the mouse wheel does not constitute a mouse button press, and (2) onscroll is only an event handler for the window object.

    I need to test for scrolling of the <select> field options. Any idea what step I should take next?

    Thanks,
    TWR
    Last edited by ThetaWaveRider; Jul 26, 2007 at 12:15.

  2. #2
    CSS & JS/DOM Adept bronze trophy
    Join Date
    Mar 2005
    Location
    USA
    Posts
    5,482
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I don't think this is possible. If I recall correctly, IE6 doesn't support any events on option elements.

    If you really don't like this behavior, I suggest you use a DHTML replacement.
    <select> Something New, Part 2
    <select> Something New, Part 1
    We miss you, Dan Schulz.
    Learn CSS. | X/HTML Validator | CSS validator
    Dynamic Site Solutions
    Code for Firefox, Chrome, Safari, & Opera, then add fixes for IE, not vice versa.

  3. #3
    SitePoint Wizard
    Join Date
    Nov 2004
    Location
    Nelson BC
    Posts
    2,310
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    This seems to disable it:

    <select onmousewheel="return false;">

  4. #4
    CSS & JS/DOM Adept bronze trophy
    Join Date
    Mar 2005
    Location
    USA
    Posts
    5,482
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Nice! Thanks jimfraser. It's nice to be proven wrong about things like this.

    That does seem to fix it in IE6, but IE4-5 don't support that event.
    We miss you, Dan Schulz.
    Learn CSS. | X/HTML Validator | CSS validator
    Dynamic Site Solutions
    Code for Firefox, Chrome, Safari, & Opera, then add fixes for IE, not vice versa.

  5. #5
    &#083;itePoint Aficionado JVLB's Avatar
    Join Date
    Jan 2002
    Location
    N 44 56.537' W 123 3.683'
    Posts
    1,127
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Perhaps another approach would be to remove focus from the select with onmouseout.

    Note: I was unable to duplicate the described behavior. On my system, as soon as the cursor left the select (with no event modifiers) scrolling returned to the larger page. Perhaps it is a function of mouse drivers. I am running IE under Linux, and perhaps that makes a difference, though it does not for most anything else (except, of course, ActiveX).
    Last edited by JVLB; Mar 5, 2006 at 20:56.

  6. #6
    SitePoint Zealot ThetaWaveRider's Avatar
    Join Date
    Aug 2004
    Posts
    112
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks for the tips, everyone. I wound up moving focus to another field with an onchange handler.

  7. #7
    SitePoint Member
    Join Date
    Mar 2006
    Posts
    3
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    A couple of months ago I posted an article on the IE6 mousewheel problem. The solution I suggested (like jimfraser) was to add onmousewheel="return(false);" to the select tag for a list/menu. As far as I can see that doesn't seem to cause problems for browsers that don't support the Microsoft onmousewheel event.

    However it's a bit of a tedious ad hoc method to add this code to each list/menu in a page.

    I'm not much of a JavaScript whizz, but this seems to work as a global fix:

    if(window.document.attachEvent)
    {
    window.document.attachEvent('onmousewheel',stopMouseWheel);
    }
    function stopMouseWheel()
    {
    if(window.event.srcElement.type)
    {if(window.event.srcElement.type == 'select-one'){return false;}}
    }

    Does that look like good code?

  8. #8
    SitePoint Author silver trophybronze trophy

    Join Date
    Nov 2004
    Location
    Ankh-Morpork
    Posts
    12,158
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Wouldn't this be more efficient?
    Code:
    if (window.attachEvent && document.getElementsByTagName) {
        var  sel = document.getElementsByTagName("select");
        for (var i = 0; i ; sel.length; ++i) {
            sel&#91;i&#93;.attachEvent('onmousewheel', function() {return false;});
        }
    }
    Birnam wood is come to Dunsinane

  9. #9
    SitePoint Member
    Join Date
    Mar 2006
    Posts
    3
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Yes it makes my code look a bit clunky Tommy!

    Although one thing I would say is that I think the mousewheel problem only affects HTML menus rather than multi-line lists (i.e. a SELECT tag with size > 1). With the latter the use of the mouse wheel does not change the user's selection - which of course is the killer. So it's for that reason, working on the basis of "minimal interference", that I used the condition of "if(window.event.srcElement.type == 'select-one')".

  10. #10
    SitePoint Author silver trophybronze trophy

    Join Date
    Nov 2004
    Location
    Ankh-Morpork
    Posts
    12,158
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    It wasn't so much clunky code I was thinking of; more that you'd attach an event handler to the whole document rather than just to the elements that need it.

    You could easily include that test in my code:
    Code:
    if (window.attachEvent && document.getElementsByTagName) {
        var  sel = document.getElementsByTagName("select");
        for (var i = 0; i ; sel.length; ++i) {
            if (sel&#91;i&#93;.size == 1) {
                sel&#91;i&#93;.attachEvent('onmousewheel', function() {return false;});
            }
        }
    }
    Birnam wood is come to Dunsinane

  11. #11
    SitePoint Member
    Join Date
    Mar 2006
    Posts
    3
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    That looks like the "proper job"! Thanks Tommy.

  12. #12
    CSS & JS/DOM Adept bronze trophy
    Join Date
    Mar 2005
    Location
    USA
    Posts
    5,482
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Wouldn't it be better to check if the multiple property was set to true or not instead of checking the size?
    We miss you, Dan Schulz.
    Learn CSS. | X/HTML Validator | CSS validator
    Dynamic Site Solutions
    Code for Firefox, Chrome, Safari, & Opera, then add fixes for IE, not vice versa.

  13. #13
    SitePoint Author silver trophybronze trophy

    Join Date
    Nov 2004
    Location
    Ankh-Morpork
    Posts
    12,158
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I don't think so. PaliGap wanted to make sure that the onmousewheel handler is not called for list boxes, only for dropdown lists. That's set by the size attribute.

    You can have a SELECT element with size="10" without allowing multiple selections (which is what the multiple attribute controls).

    In theory, you could also set the multiple attribute for a dropdown (size="1"), although it doesn't make much sense and would probably be ignored by the UA.
    Birnam wood is come to Dunsinane

  14. #14
    CSS & JS/DOM Adept bronze trophy
    Join Date
    Mar 2005
    Location
    USA
    Posts
    5,482
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Ah, good point. Thanks for responding, Tommy.
    We miss you, Dan Schulz.
    Learn CSS. | X/HTML Validator | CSS validator
    Dynamic Site Solutions
    Code for Firefox, Chrome, Safari, & Opera, then add fixes for IE, not vice versa.


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
  •