event.returnValue = false of an event

Question

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?

Solution

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;
    }

Comments

[Matt Greer]

I've never heard of returnValue as a property. Could it be you misread and should return false in the event handler?

[Marius Popescu]

here stackoverflow.com/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.com/en-us/library/ms535863%28v=vs.85%29.aspx and I realy don't understand what I am missing

[Barmar]

Try ending the function with return false anyway.

[Marius Popescu]

Thank you for your answer. Unfortunately it didn't work. I fixed my problem in the end by adding event.returnValue = false in the 'onmousemove' event, instead on 'onmousedown' event and it worked. Still, as a programing challenge ... maybe one day we'll figure out why the first approach was incorrect ... but right now I'm happy :)

[Lemonade]

Yeah sounds obvious. mousemove is responsible for the text selection. Poor me i didn't notice that. Thanks for your reply.

[Marius Popescu]

According to my tired logic (is 2:15 in the morning) ... is not that obvious : when I stop the propagation of the event in 'onmousedown', when you move the mouse over the screen, it should act like ... there was no mouse button pressed, just a simple movement on the screen with the mouse. So, if the user is not holding down the mouse button ... it doesn't make sense to select the text. Still, I repeat, I'm tired and sleepy :)

[Lemonade]

seems to depend. you should test it with stopPropagation() in mousedown instead of preventDefault(). I think in mousemove the default behaviour is text selection and therefore preventDefault() is correct And for mousedown you should stop propagation, by using stopPropagation() or return false.

[Sandeep Kamath]

I had this issue, because while using keypress javascript method to submit the page with entering key while the event was getting propagated to another event like date picker while using the page in an iframe.

[GreySage]

What is, like in IE11, event.preventDefault is defined, just does nothing? What if it AND returnValue are undefined?