title: Can't listen to DOMMouseScroll on Window in Firefox
body: <p>I'm experiencing quite a problem related with the mousewheel (DOMMouseScroll) event with firefox. I've got a header div, a content div and a footer div. I want the user to be able to scroll the page while on the header and footer but not while on the content because it has a map object (flash object) and the mouse wheel should zoom in and zoom out. </p>
  
  <p>I'm using jQuery 1.8 and Firefox 15.0.1. I've spent pretty much all day trying to figure this out and it seems to me that this should work :</p>
  
  <pre><code>var isFireFox = (navigator.userAgent.indexOf('Firefox') != -1); 
  var scrollEv = (isFireFox)? 'DOMMouseScroll' : 'mousewheel';
  
  $(document).on(scrollEv, HandleScroll);
  
  function HandleScroll(e)
  {
      var sender = event.srcElement;
  
      alert(sender.id + " has sent event: " + e.type);
  
      if (sender.id == "viewerContent" || sender.id == "mapObject")
      {
          alert("Event is being blocked");
          e.stopPropagation();
          e.preventDefault(); 
      }
  }
  </code></pre>
  
  <p>I've read countless posts, threads and blogs and everything I read say this should work in IE, Chrome and Firefox. Of course, it doesn't work in FireFox. It doesn't even enter the "HandleScroll" function. Also, I think it should even be possible to do something more simple, like this :</p>
  
  <pre><code>$('#viewerContent').on(scrollEv, false);
  $('#mapObject').on(scrollEv, false);
  </code></pre>
  
  <p>Have I overlooked something simple or what?</p>
  
  <p>Thanks for the help,</p>
  
  <p>Ggilmann</p>
  
  <p><strong>Added :</strong></p>
  
  <p>Following Fabrício Matté's suggestion, I also tried this :</p>
  
  <pre><code>$('#viewerContent').scroll(HandleScroll);
  $('#mapObject').scroll(HandleScroll);
  </code></pre>
  
  <p>And this :</p>
  
  <pre><code>$('#viewerContent').on('scroll', HandleScroll);
  $('#mapObject').on('scroll', HandleScroll);
  </code></pre>
  
  <p>To no avail!</p>
  
  <p><strong>Added again :</strong></p>
  
  <p>jcubic suggested I use the plugin on this page : <a href="http://github.com/brandonaaron/jquery-mousewheel" rel="nofollow">github.com/brandonaaron/jquery-mousewheel</a> </p>
  
  <p>I'm not too sure how it works, am i supposed to simply include the script in my page via a script tag then call the one of the methods as shown in the example on the link provided?</p>
  
  <p>Thanks </p>
  
  <p><strong>Further Addition :</strong></p>
  
  <p>I got the plugin working, it was quite easy. However this does not solve my problem. It does works for a standard div but it doesn't seem to work for a div containing flash content. I'm starting to think this is a flash or firefox bug as maybe detailed here : <a href="http://cookbooks.adobe.com/post_Workaround_to_support_mouse_wheel_for_FireFox_with-13086.html" rel="nofollow">http://cookbooks.adobe.com/post_Workaround_to_support_mouse_wheel_for_FireFox_with-13086.html</a></p>
  
  <p>If anyone could confirm this, I would appreciate it.</p>
  
  <p><strong>Another solution that doesn't work:</strong></p>
  
  <p>Following the suggestion made by sethetter I tried this:</p>
  
  <pre><code>var isOverContent;
  
  $('#viewerContent').on('mouseover', function(){isOverContent = true;});
  $('#viewerContent').on('mouseout', function(){isOverContent = false;});
  
  document.onscroll = HandleScroll;
  
  function HandleScroll(e)
  {       
      if (isOverContent)
      {               
          console.log("Tried to block event");
          e.stopPropagation();  // Apparently, the "scroll" event cannot be prevented or canceled.
          e.preventDefault(); 
      }
  }
  </code></pre>
  
  <p>This allows me to detect when the user scrolled over the viewerContent in FireFox. However, the prevent default and stop propagation event do not work. The page keeps on scrolling.</p>