jQuery use of vertical scrollbar and mousedown - FireFox works, IE has issue

Question

I have a menu scripted with jQuery, which pops out when triggered by an event. It has a vertical scroll bar on the side. The scrolling works fine in FireFox, but not in IE (8 or 9). I guess it has something to do with the mousedown event, which is needed to select an item from the menu.

    .mousedown(function (event) {
        var li = get_element_from_event(event, "li");
        if(li){
            return false;
        }

In case of IE, when clicking with the mouse on the scrollbar, the menu collapses again (as if the user made a selection).

Is this a common problem in IE (i.e. issues with the scrollbar)?

I think it also has to do with the following snippet of scrollbar code

$(".token-input-list")[0].scrollTop = $(".token-input-list")[0].scrollHeight;

Answer 1

Thanks for your input - I found quite a bit of buggyness on the scrollbar issue, so I solved it by inlcuding a nice list script found here: http://rascarlito.free.fr/hoverscroll/. Dit the trick for IE, and thus for me ;)

Answer 2

Depending on what get_element_from_event() does, and what else you're doing with mousedown, IE may be behaving correctly--if the event target is not an element, it will supposedly return false for li, and so it will fail if(li) and therefore not return false for mousedown, but keep on chugging along.

As far as fixing it goes, you'll want to find out what IE is returning for li (via an alert or the console) and either test for it in get_element_from_event() or in a new var/function.

Answer 3

If your .mousedown event is attached to the same element the scrollbar is on, move your .mousedown event to a new div inside the div that has the scrollbar.

Answer 4

The problem is that using the global window.event object, and not jQuery's event object. window.event only works in some browsers, and it is not a W3C standard.

jQuery normalizes the event object so it's the same in all browsers. The event handler is passed that jQuery event object as a parameter. using that.

$(".class_name").mousedown(function (e) {

  switch (e.which) {
    case 1: //leftclick
        //...
        break;
    case 3: //rightclick
        //...
        break;
  }
});