I am working on a scrollbar in Javascript. All works fine except for one problem. I notice that while dragging the scrollbar, if I move the mouse over the context that is being scrolled, the content gets selected. I don't want that to happen, so I used the preventDefault method from the event object, which worked perfectly for IE9 and the other modern browsers. But on IE7 and IE8, the problem persists. I did some searches and found that I should set the returnValue parameter of the event object to false. But the problem still persists. Also, if I write alert(window.event.returnValue) it pops up undefined.

scrollbar.onmousedown = function (event) {
    if (typeof event == 'undefined') event = window.event;
    if (typeof event.preventDefault != 'undefined') event.preventDefault();
    event.returnValue = false;
    // do some stuff
}

What am I doing wrong?

I am working on a scrollbar in Javascript. All works fine except for one problem. I notice that while dragging the scrollbar, if I move the mouse over the context that is being scrolled, the content gets selected. I don't want that to happen, so I used the preventDefault method from the event object, which worked perfectly for IE9 and the other modern browsers. But on IE7 and IE8, the problem persists. I did some searches and found that I should set the returnValue parameter of the event object to false. But the problem still persists. Also, if I write alert(window.event.returnValue) it pops up undefined.

scrollbar.onmousedown = function (event) {
    if (typeof event == 'undefined') event = window.event;
    if (typeof event.preventDefault != 'undefined') event.preventDefault();
    event.returnValue = false;
    // do some stuff
}

What am I doing wrong?

• javascript
• dom-events

• 1 I've never heard of returnValue as a property. Could it be you misread and should return false in the event handler? – Matt Greer Commented Jul 20, 2013 at 21:59
• 1 here stackoverflow./questions/1000597/…, the answer 'event.returnValue = false;', is marked as being useful 170 times, and I have also read the microsoft documentation here msdn.microsoft./en-us/library/ms535863%28v=vs.85%29.aspx and I realy don't understand what I am missing – Marius Popescu Commented Jul 20, 2013 at 22:05
• 2 Try ending the function with return false anyway. – Barmar Commented Jul 20, 2013 at 22:12
• Tried it, didn't work – Marius Popescu Commented Jul 20, 2013 at 22:25
• After you got it to work by moving your code to mousemove instead of mousedown, did you try to only use the event.preventDefault() ? This should work in IE7&8 without the need for event.returnValue = false. In IE7&8 its window.event.preventDefault() like you did. So i'm just curious. – Lemonade Commented Jul 20, 2013 at 22:55

3 Answers 3

In IE7&8 there is no event Object as a parameter to the function, instead there exists window.event. Try

window.event.cancelBubble = true

to stop the propagation. To avoid problems with FireFox etc. do something like this:

    if (!event)
       event = window.event;

    //IE9 & Other Browsers
    if (event.stopPropagation) {
      event.stopPropagation();
    }
    //IE8 and Lower
    else {
      event.cancelBubble = true;
    }

I fixed my problem in the end by adding event.returnValue = false in the 'onmousemove' event, instead on 'onmousedown' event and it worked. It doesn't answer the question about why the orginal code is wrong, but I wanted to post this for people that see my question, to not waste their time in trying to help me with a problem that I have already fixed. Thank you for your quick answers, I appreciate.

I too had the same problem. preventDefault was not working in IE. so I added the below code to stop propagation

if (a_event.preventDefault) {
a_event.preventDefault();
} else if (typeof a_event.returnValue !== "undefined") {
a_event.returnValue = false;
}