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

In the following jsfiddle:

(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.

CodePudding user response：

This is because the video controls hide the mousedown events, as they intercept mouse events themselves natively. You can enlarge the video and see that clicking outside the control box does trigger the event: https://jsfiddle.net/spk5ty9h/13/

You can also remove the controls directive and then you will be able to click everywhere on the video to trigger the event.

CodePudding user response：

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.

CodePudding user response：

Well with video you can´t do that, I have modified yor fiddle and now works, basically wrap the video in a layer and use pseudoelemnts like after to do the magic

https://jsfiddle.net/MAXXALANDER/0yd8xwje/

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

video {
  width: 150px;
  height: 100px;
  background: grey;
}
.video-wrapper {
  position: relative;
  width: 150px;
  height: 100px;
  
}
.video-wrapper:after{
  content:'';
  display:block;
  width:150px;
  height: 100px;
  position:absolute;
  left:0;
  top:0;
  z-index:1;
}
span {
  display: inline-block;
  width: 150px;
  height: 100px;
  background: cyan;
}
div {
  width: 150px;
  height: 100px;
  background: yellow;
}

<div >
<video controls></video>
</div>
<span></span>
<div></div>