title: javascript stopPropagation not working on input field
body: <p>Have a simple div array with values that the user will choose from and an "other" field where they can put in their own number. I have a clearing div (lower right) that will clear the selection and input field; however, I also want to have a click event on the containing div as well.</p>
  
  <p>I've searched and nothing seems to do the trick, the one that comes close is using stopPropagation so the click on a div doesn't trigger the containing div's script. It's working on all the divs but for some reason isn't working on the input field. everytime i click the number scrubber or try typing in the field it calls the reset script of the containing div. Is there something about an input field that causes the stopPropagation to not work? or am i missing something. None of the other things i found seemed to solve it.</p>
  
  <p>HTML</p>
  
  <pre><code>&lt;div id="don_options"&gt;
      &lt;div class="group"&gt;
          &lt;div class="col"&gt;&lt;span class="don"&gt;xxx&lt;/span&gt;&lt;/div&gt;
          &lt;div class="col"&gt;&lt;span class="don"&gt;xxx&lt;/span&gt;&lt;/div&gt;
          &lt;div class="col"&gt;&lt;span class="don"&gt;xxx&lt;/span&gt;&lt;/div&gt;
      &lt;/div&gt;
  
      &lt;div class="group"&gt;
          &lt;div class="col"&gt;&lt;span class="don"&gt;xxx&lt;/span&gt;&lt;/div&gt;
          &lt;div class="col"&gt;&lt;span class="don"&gt;xxx&lt;/span&gt;&lt;/div&gt;
          &lt;div class="col"&gt;&lt;span class="don"&gt;xxx&lt;/span&gt;&lt;/div&gt;
      &lt;/div&gt;
  
      &lt;div class="group"&gt;
          &lt;div class="col"&gt;&lt;span class="don"&gt;xxx&lt;/span&gt;&lt;/div&gt;
          &lt;div class="col"&gt;&lt;span class="don"&gt;xxx&lt;/span&gt;&lt;/div&gt;
          &lt;div class="col"&gt;&lt;span class="don"&gt;xxx&lt;/span&gt;&lt;/div&gt;
      &lt;/div&gt;
  
      &lt;div class="group"&gt;
          &lt;div class="col"&gt;&lt;span class="don"&gt;Other&lt;/span&gt;&lt;br class="mobile"&gt;&lt;input id="other" name="other" type="number" min="3" step=".01" value="" size="25" maxlength="255" class="form-text2" placeholder="Other"&gt;&lt;/div&gt;
          &lt;div class="col"&gt;&amp;nbsp;&lt;/div&gt;
          &lt;div class="col"&gt;&lt;span class="don"&gt;Clear&lt;/span&gt;&lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>Javascript</p>
  
  <pre><code>$('#don_options').on('click', function(e) {
      resetDon();
  });
  
  $('.don').on('click', function(e) {
      e.stopPropagation(); // stop bubbling to parent element
      //e.preventDefault();
      //e.cancelBubble = true;
      //e.stopImmediatePropagation();
  
      //lots of buttonesk goodness here
  });
  
  $('#other').on('keyup change click', function(e) {
      e.stopPropagation(); // stop bubbling to parent element
      //e.preventDefault();
      //e.cancelBubble = true;
      //e.stopImmediatePropagation();
  
      //more goodness here for the input field
  });
  
  function resetDon() {
      //clear "buttons" here
  }
  </code></pre>
  
  <p>Adding a quick screenshot for visual. Black box is the containing div
  <a href="https://i.stack.imgur.com/DwzVe.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/DwzVe.png" alt="enter image description here"></a></p>