title: Prevent website from scrolling when actuating JQuery Knob
body: <p>I have a DSP application which can be controlled through a web interface. To allow the user to set certain numeric values, such as gain, sensitivity, volume, frequency limits of filters, etc., I use the <em>JQuery Knob</em> element from <em>Anthony Therrien</em>.</p>
  
  <p>The <em>JQuery Knob</em> element may be actuated by placing the cursor over the knob and actuating the scroll wheel. However, the problem is that, when you do this, not only the knob's value changes, but also the document itself scrolls so that the knob moves away under your cursor as you attempt to change its value using the scroll wheel (or track pad, or touch screen, ...).</p>
  
  <p>To ensure that the problem is not specific to my application and to have a code example for my question, I implemented a small test site which demonstrates the problem.</p>
  
  <p>This is the <em>(X)HTML(5)</em> code of the web site.</p>
  
  <pre><code>&lt;?xml version="1.0" encoding="utf-8"?&gt;
  &lt;!DOCTYPE html&gt;
  &lt;html xmlns="http://www.w3.org/1999/xhtml"&gt;
      &lt;head&gt;
          &lt;title&gt;
              Test page
          &lt;/title&gt;
          &lt;script src="js/include/jquery-3.2.1.js" type="text/javascript"&gt;&lt;/script&gt;
          &lt;script src="js/include/jquery.knob.js" type="text/javascript"&gt;&lt;/script&gt;
          &lt;script src="js/test.js" type="text/javascript"&gt;&lt;/script&gt;
      &lt;/head&gt;
      &lt;body&gt;
          &lt;div id="content"&gt;
              &lt;div&gt;
                  Lorem ipsum dolor sit amet, consectetur adipisici elit, sed eiusmod
                  tempor incidunt ut labore et dolore magna aliqua. Ut enim ad minim
                  veniam, quis nostrud exercitation ullamco laboris nisi ut aliquid
                  ex ea commodi consequat. Quis aute iure reprehenderit in voluptate
                  velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint
                  obcaecat cupiditat non proident, sunt in culpa qui officia deserunt
                  mollit anim id est laborum.
              &lt;/div&gt;
          &lt;/div&gt;
          &lt;div&gt;
              &lt;div class="param" style="display: inline-block"&gt;
                  &lt;input class="knob" value="50" data-min="0" data-max="100"
                      data-step="1" data-width="150" data-height="150"
                      data-angleoffset="-135" data-anglearc="270"
                      data-rotation="clockwise" data-cursor="false"
                      data-thickness=".3" data-displayprevious="true"
                      data-bgcolor="#181818" data-fgcolor="#ff8800"
                      type="text"/&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>And these are the contents of the <em>js/test.js</em> file referenced by the web site.</p>
  
  <pre><code>/*
   * This is called after the DOM initialized.
   */
  function init() {
      var contentDiv = $('#content').get(0);
      var loremDiv = contentDiv.firstChild.nextSibling;
  
      /*
       * Replicate the lorem ipsum a couple of times to have
       * content on the site for scrolling.
       */
      for (var i = 0; i &lt; 16; i++) {
          var newNode = loremDiv.cloneNode(true);
          contentDiv.appendChild(newNode);
      }
  
      /*
       * Turn the input element into a JQuery knob.
       */
      $('.knob').knob();
  }
  
  $(init);
  </code></pre>
  
  <p>The <em>JavaScript</em> code fills the site with a lot of blind text and turns the input element into a <em>JQuery Knob</em>. Load the site in a browser (I tested it using <em>Firefox</em>, though I don't suspect the issue to be browser specific), scroll down to the knob, place a cursor over the knob and actuate the scroll wheel. You will see that the scroll wheel event changes <strong>both</strong> the value of the knob <strong>and</strong> scrolls the document.</p>
  
  <p>To prevent the document from scrolling when the user actuates the scroll wheel while the cursor is placed over the knob, I tried to register an event handler on the DIV element surrounding the <em>JQuery Knob</em>, which captures <code>onwheel</code> events. To achieve this, I just inserted the following code into the body of the <code>init()</code> function right at the end.</p>
  
  <pre><code>    var paramDiv = $('.param').get(0);
  
      /*
       * Prevent site from scrolling when knob is actuated.
       */
      paramDiv.onwheel = function(event) {
          event.preventDefault();
      }
  </code></pre>
  
  <p>(I just realized that the syntax highlighting at <em>StackOverflow</em> highlights <code>event</code> as a <em>JavaScript</em> key word. However, there seems to be no difference in behaviour whether the parameter is named <code>event</code> or <code>e</code> or whatever.)</p>
  
  <p>This indeed prevents the document from scrolling when the mouse wheel is actuated while the cursor is placed over the knob (or rather, the DIV containing it). However, it also prevents the mouse wheel from actuating the knob itself, which defeats the entire purpose.</p>
  
  <p>I don't understand why capturing the event at the surrounding DIV prevents the knob from being actuated using the scroll wheel. As far as I understand, events propagate "up the DOM tree", from the child to the parent nodes. So the <em>Knob</em> (or the DOM elements that it consists of) should get the mouse wheel events <strong>first</strong>, causing the knob to get actuated by the wheel. Then, I'd expect the event to propagate "upwards" (towards the parent nodes) in the DOM tree, so that it is eventually captured by the event handler on the surrounding DIV, which prevents the document from being scrolled.</p>
  
  <p>However, this is not what happens. When I capture the mouse wheel event on the surrounding DIV, this indeed prevents the site from scrolling when the cursor is placed over the knob. However, it <strong>also</strong> prevents the knob from getting actuated using the mouse wheel. Anyone knows, why this happens and how to correctly handle this issue?</p>
  
  <p>The behaviour I want to achieve is the following:</p>
  
  <ul>
  <li>Actuating the scroll wheel while the cursor is placed over a knob <strong>only</strong> actuates the corresponding knob but does <strong>not</strong> scroll the document.</li>
  <li>Actuating the scroll wheel while the cursor is <strong>not</strong> placed over a knob scrolls the document.</li>
  </ul>
  
  <p>I have a modified version of <em>JQuery Knob</em> which I use in my specific application and which has several issues fixed. (The code of <em>JQuery Knob</em> is currently unmaintained. The last commit in the repository was in December 2015.) However, the problem also occurs with the original version, so when a fix/workaround is known which works for the original <em>JQuery Knob</em> implementation, chances are it will work with my custom version as well.</p>
  
  <p>Any help is appreciated.</p>