title: How to capture onmousedown event for a div with specific class
body: <p>I have the following div:</p>
  
  <pre><code>&lt;div class="signature watermarkimage" style="border: dotted currentColor; border-image: none;" data-ordinal="1"&gt;
      &lt;div style="margin: -1em 0px 1em !important; padding: 0px !important; width: 100% !important; height: 0px !important; -ms-touch-action: none;"&gt;&lt;/div&gt;
      &lt;canvas width="359" height="90" class="jSignature" style="margin: 0px; padding: 0px; border: currentColor; border-image: none; width: 100%; height: 90px; -ms-touch-action: none;"&gt;&lt;/canvas&gt;
      &lt;div style="margin: -1.5em 0px 1.5em !important; padding: 0px !important; width: 100% !important; height: 0px !important; position: relative; -ms-touch-action: none;"&gt;&lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>Basically want to capture the onmousedown of the div which is having signature class!
  I am able to capture the onclick event handler in the following way:</p>
  
  <pre><code>$(document).on("click", ".signature", function () {
      if ($(this).hasClass('watermarkimage')) {
          $(this).removeClass('watermarkimage');
      }
  });
  </code></pre>
  
  <p>However, when I am trying to capture onmousedown in the same way, It's not propagating.
  I think mostly it is due to some syntax error,any help will be highly appretiated!
  Thank in advance.</p>