How can I cancel this event listener [duplicate]

Question

I have four videos in one div and I have another one video in another div I have done an event listener that will apply for the all five video as you see

var videoAct = document.querySelectorAll('video'), mainVideo = document.getElementById('mainvideo'), // this id for the video in (mainV ) allVideo = document.getElementById('allvideo'), // this id for the div that contain the four video mainV = document.getElementById('mainv'); // this id for the div that contain one video videoAct.forEach(function(video) { video.addEventListener('mouseover', function() { this.play(); video.muted = true; }); video.addEventListener('mouseleave', function() { this.pause(); }); })

so how I remove this event listener from my one video in (mainV ) so that I work with its default setting

you can use removeEventListener: developer.mozilla.org/en-US/docs/Web/API/EventTarget/… — zb22
– zb22, Commented Jul 21, 2018 at 11:13
Why to remove the listener when you can simply ignore that element while adding event listener. @zb22 — Ankit Agarwal
– Ankit Agarwal, Commented Jul 21, 2018 at 11:15

Flash Thunder · Accepted Answer · 2018-07-21 11:15:29Z

You don't have to remove your event, just don't apply it...

var allVideo = document.getElementById('allvideo'), // this id for the div that contain the four video videoAct = allVideo.querySelectorAll('video'); // look for videos only in the #allvideo div videoAct.forEach(function(video){ video.addEventListener('mouseover',function(){ this.play(); video.muted = true; }); video.addEventListener('mouseleave',function(){ this.pause(); }); })

i try but it didn't work , it give me this error in console ( allVideo.forEach is not a function )
there is no allVideo.forEach() in the code I gave, so there is something wrong in your code, not in my answer... you should do forEach() on videoAct not on allVideo as videoAct contains list of video elements and allVideo is only a div that contains those video elements

Ankit Agarwal · Accepted Answer · 2018-07-21 11:14:46Z

You can check the id value of the video which you want to ignore inside the for loop so that the listener is not added to that video.

var videoAct = document.querySelectorAll('video'), mainVideo = document.getElementById('mainvideo'), // this id for the video in (mainV ) allVideo = document.getElementById('allvideo'), // this id for the div that contain the four video mainV = document.getElementById('mainv'); // this id for the div that contain one video videoAct.forEach(function(video){ if(video.id !== 'mainvideo') { video.addEventListener('mouseover',function(){ this.play(); video.muted = true; }); video.addEventListener('mouseleave',function(){ this.pause(); }); } })

if i want to change the source of the video with ( id = mainVideo ) to any source from the four video when i click on any of them i try to add this code to if statement but it didn't work --> videoAct.forEach(function(video){ if(video.id !== 'mainvideo') { video.addEventListener('mouseover',function(){ this.play(); video.muted = true; }); video.addEventListener('mouseleave',function(){ this.pause(); }); video.addEventListener('click', function(){ var source = this.hasAttribute('src').value; mainVideo.src = src[source]; }) } }) <--

Collectives™ on Stack Overflow

How can I cancel this event listener [duplicate]

2 Answers 2

2 Comments

3 Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

3 Comments

Linked

Related