Search code examples
javascriptaddeventlistener

mousedown event not triggered on Window when fired over <video> element

In the following jsfiddle:

https://jsfiddle.net/4psch38x/2/

(code):

window.addEventListener("mousedown", () => {
  alert("window mousedown");
}, true)

If clicking anywhere outside the video player, including over other elements, the mousedown event fires on Window (alert appears.)

If clicking over the video player, mousedown event does not fire on Window (alert doesn't appear.)

This behavior occurs even when I make the listener capturing. Behavior occurs on Chrome and Firefox.

In fact, event when I attach a listener to the video element, the event is not fired (although I need it to fire on the window):

https://jsfiddle.net/4psch38x/3/

Why is this? My google searches haven't come up with anything.

Solution

  • The controls are part of a Shadow DOM, an encapsulated part of DOM elements used for components and so on. It's attached by the browser to the video element when the controls attribute is there.

    When you're not in need of the controls, you can simply remove the attribute, and it will work on the full video element.