title: How to tell if user clicked video element or one of the video controls?
body: <h1>Question</h1>
  <p>Having a html5 <code>video</code> element with <code>controls</code>, like:</p>
  <pre><code>&lt;video class=&quot;media video&quot; src=&quot;somevid.ogg&quot; controls&gt;&lt;/video&gt;
  </code></pre>
  <p>And with a click handler assigned to it:</p>
  <pre><code>$('.media.video').on('click', function (event) { /* ... */ });
  </code></pre>
  <p>Is it possible to determine inside the handler method if the user simply clicked the video element or one of the controls?</p>
  <p>Haven't found documentation on this one, and searched the event object for clues, but no success.</p>
  <h1>My alternative solutions:</h1>
  <ol>
  <li>Assign all listeners to the video, and based on video change events determine if the click has been made on a control element, or the video - <em>is too much hassle &amp; unclean</em>.</li>
  <li>Use custom control UI, with the default one disabled - <em>if there is no answer for my question i'd go with this</em>.</li>
  </ol>