CODEWITHSUNDEEP
javascriptaddeventlistener
KevinHJ
KevinHJ

Reputation: 1104

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.

Upvotes: 0

Views: 360

Answers (3)

marcos.efrem
marcos.efrem

Reputation: 767

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 class="video-wrapper">
<video controls></video>
</div>
<span></span>
<div></div>

Upvotes: 0

tobimori
tobimori

Reputation: 553

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.

Upvotes: 2

MrMikimn
MrMikimn

Reputation: 851

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.

Upvotes: 0

Related Questions