5

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?

Brian Tompsett - 汤莱恩
  • 5,753
  • 72
  • 57
  • 129
Marius Popescu
  • 274
  • 1
  • 3
  • 7
  • 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 Jul 20 '13 at 21:59
  • 1
    here http://stackoverflow.com/questions/1000597/event-preventdefault-function-not-working-in-ie, the answer 'event.returnValue = false;', is marked as being useful 170 times, and I have also read the microsoft documentation here http://msdn.microsoft.com/en-us/library/ms535863%28v=vs.85%29.aspx and I realy don't understand what I am missing – Marius Popescu Jul 20 '13 at 22:05
  • 2
    Try ending the function with `return false` anyway. – Barmar Jul 20 '13 at 22:12
  • Tried it, didn't work – Marius Popescu Jul 20 '13 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 Jul 20 '13 at 22:55

3 Answers3

2

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;
    }
Lemonade
  • 503
  • 2
  • 8
  • 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 :) – Marius Popescu Jul 20 '13 at 22:39
  • Yeah sounds obvious. mousemove is responsible for the text selection. Poor me i didn't notice that. Thanks for your reply. – Lemonade Jul 20 '13 at 22:45
  • 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 :) – Marius Popescu Jul 20 '13 at 23:17
  • 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. – Lemonade Jul 21 '13 at 00:10
0

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.

Marius Popescu
  • 274
  • 1
  • 3
  • 7
0

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;
}
Sandeep Kamath
  • 670
  • 9
  • 15
  • 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. – Sandeep Kamath May 31 '17 at 10:36
  • What is, like in IE11, event.preventDefault is defined, just does nothing? What if it AND returnValue are undefined? – GreySage Sep 12 '18 at 21:31