title: How to prevent child element executing onmousedown event
body: <p>I've got the following markup on the page</p>
  <pre><code>&lt;div id=&quot;box&quot;&gt;
      &lt;div id=&quot;box_child_one&quot;&gt;&lt;/div&gt;
      &lt;div id=&quot;box_child_two&quot;&gt;&lt;/div&gt;
      &lt;div id=&quot;box_child_three&quot;&gt;&lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  <p>I need to trigger the <strong>onmousedown</strong> event on all elements inside the <strong>#box</strong> div so i've got this javascript code:</p>
  <pre><code>var element = &quot;#box&quot;;
  document.querySelector(element).onmousedown = function() {
      alert(&quot;triggered&quot;);
  };
  </code></pre>
  <p>However, I do not want onmousedown being triggered on the <strong>#box_child_three</strong> element.
  How can I achieve this?</p>
  <p>Thank you.</p>