Please check the below code:
var clickfn = function(){
alert("clicked");
}
document.getElementById("div1").addEventListener("click",clickfn,true);
clickfn = function(){ };
document.getElementById("div1").removeEventListener("click");
http://jsfiddle.net/qUtzL/4/
Why does the removeEventListener does not work?
removeEventListener takes 2 parameters, the event, and the function to remove.
This should work:
document.getElementById("div1").removeEventListener("click", clickfn);
Also, the function you're executing is empty.
var clickfn = function(){ };
You have to specify the exact function you've specified to addEventListener as the second argument. If you specified the third useCapture argument, you'll have to specify the same and equivalent to removeEventListener as well.
For example:
function myFunc(event){ alert(event.target.textContent); }
var myElement=document.getElementById('myElement');
//Add EventListener
myElement.addEventListener('click', myFunc, false );
/* ... */
//Remove EventListener
myElement.removeEventListener('click', myFunc, false );
↪ View an example at jsFiddle
You can find more information at the Mozilla Developer wiki.
I recently had this issue with the Navbar code in ReactJS to give the Navbar a background color after scrolling 100px on the y-axis and remove it if the page view is within 100px of the top.
All I had to do is introduce a reverse function in the removeEventListener to give it the rules for application.
const [show, handleShow] = useState(false);
useEffect(() => {
window.addEventListener('scroll', () => {
if (window.scrollY > 100) {
// do this
handleShow(true);
} else handleShow(false);
});
return () => {
window.removeEventListener('scroll', () => {
if (window.scrollY < 100) {
// do this
handleShow(false);
} else handleShow(true);
});
};
});
Related
So I have this function (App.btnInteractive) that adds or removes mouseover and mouseout event listeners according to the boolean passed into the function call
'use strict';
const btnStart = document.querySelector('.btn--start');
class App {
constructor() {
btnStart.addEventListener('click', this.start.bind(this));
}
btnInteractive(state) {
console.log(`Check: ${state}`);
function mouseover() {
console.log('over');
}
function mouseout() {
console.log('out');
}
if (state) {
btnStart.addEventListener('mouseover', mouseover);
btnStart.addEventListener('mouseout', mouseout);
} else {
btnStart.removeEventListener('mouseover', mouseover);
btnStart.removeEventListener('mouseout', mouseout);
}
}
start() {
this.btnInteractive(true);
setTimeout(() => {
this.btnInteractive(false);
}, 2000);
}
}
const app = new App();
That results in console output below after clicking button and moving cursor out of the button and on it after each function call
Check: true
out
over
Check: false
out
over
So here's my trail of thought:
Both if and else code blocks execute
Stripping the code down (resulted in code in question itself)
Removing click event listener doesn't help
Removing both click and mouseout also doesn't work
Idea is that after 2 seconds passed the mouseover and mouseout event listeners should be removed.
I'm not an expert in Javascript, but i think that when you try to remove the event listeners, you need to have the real reference to the function you used before.
When you execute it again inside the setTimeout, it is trying to remove the reference to the new functions "mouseover" and "mouseout" that were created.
Try setting the callbacks for the listeners like that:
if (state) {
btnStart.onmouseover = mouseover;
btnStart.onmouseout = mouseout;
} else {
btnStart.onmouseover = () => {};
btnStart.onmouseout = () => {};
}
I can't get my removeEventListener to work. I am passing in what I believe is exactly the same function, so I am not sure why it isn't working. I think it may have to do with the fact that I am using it on the window object.
window.addEventListener("DOMContentLoaded", changeColor, true);
function changeColor() {
const sectionToChange = document.querySelector("section:has(#color-select)");
const colorSelector = document.querySelector("#color-select");
colorSelector.addEventListener("input", event => {
sectionToChange.style.cssText += `background-color: ${colorSelector.value}`;
});
}
window.addEventListener("DOMContentLoaded", removeEvents);
function removeEvents() {
const removeListenersButton = document.querySelector("#remove-listeners");
removeListenersButton.addEventListener("click", () => {
console.log("clicked");
window.removeEventListener("DOMContentLoaded", changeColor, true);
});
};
Everything works fine except removing the event listener. The "clicked" prints out to the console as well.
I added an infinite scrolling feature to my page. It attaches an event listener in the componentDidMount lifecycle hook and I want to remove it within the action called by the event listener when there is no "nextlink anymore". I set a console.log() message which works fine, but I am uncertain why the window.removeEventListener() function does not work. Any help would be appreciated.
Piece of code responsible for adding/removing the eventListener.
componentDidMount() {
this._isMounted = true;
this.props.onFetchTeams();
this.scrollListener = window.addEventListener("scroll", e => {
this.handleScroll(e);
});
}
handleScroll = () => {
const hasMoreLink = this.props.teams["#odata.nextLink"];
if (hasMoreLink == "") {
console.log("remove event handler");
window.removeEventListener("scroll", this.handleScroll);
}
// If there is at least a team and is currently not loading, proceed to load more.
if (this.state.loadingMore === false && this.props.teams["value"]) {
// get the last teamcard in the page
const lastTeam = document.querySelector(
".team-card-wrapper:last-of-type"
);
// get the height of the current team, and get the height of the current position on screen.
const lastTeamOffset = lastTeam.offsetTop + lastTeam.clientHeight;
const pageOffset = window.pageYOffset + window.innerHeight;
// the range that teams will load earlier than the bottom of the page.
const bottomOffset = 30;
if (pageOffset > lastTeamOffset - bottomOffset) {
this.setState({ loadingMore: true });
this.props.onFetchMoreTeams(hasMoreLink);
}
}
};
removeListener needs the same reference for function that it used while addListener. Change the code to addEventListener like
this.scrollListener = window.addEventListener("scroll", this.handleScroll);
This is because the function that is given to addEventListener and the one given to the removeEventListener should be exactly the same, but in your case, you are creating a new arrow function for the addEventListener. so I think you should try something like this:
this.scrollListener = window.addEventListener("scroll", this.handleScroll)
...
handleScroll = (e) => {
...
if(noMoreScroll) window.removeEventListener("scroll", this.handleScroll)
...
}
I hope this helps you :)
Consider revising the way your add the scroll event handler, by passing the handleScroll function directly:
componentDidMount() {
this._isMounted = true;
this.props.onFetchTeams();
/*
With the this.handleScroll bound to this class instance, we can now pass the method
directly to addEventListener as shown
*/
this.scrollListener = window.addEventListener("scroll", this.handleScroll);
}
handleScroll = () => {
const hasMoreLink = this.props.teams["#odata.nextLink"];
if (hasMoreLink == "") {
console.log("remove event handler");
/* This will now work as expected */
window.removeEventListener("scroll", this.handleScroll);
}
/* Rest of your code remains unchanged .. */
}
I am trying to make a function that would allow me to toggle eventListener of an element.
In the example below, I have three buttons: main, on and off. When I click on the on button, the main button becomes functional. After I click off button, the main button should not work anymore (but now it still does).
Now I can achieve a desired behavior by clicking on button for the second time, but I guess it's a bad coincidence and it's not supposed to work that way.
Maybe I should add that I would like to work this out without using jQuery or similar and it needs to be a function, because I am going to use it for a lot of buttons.
(I suspect something with scope causes the problem (clickHandler when calling the function to activate the button is not the same as the clickHandler when calling the function to disable the button), but I can't think of a way to test it.)
// buttons definitions, not important
var mainButton = document.querySelector("#mainButton");
var onButton = document.querySelector("#onButton");
var offButton = document.querySelector("#offButton");
// main function
var toggleButtons = function(toggleVal, button, element) {
var activateButton, clickHandler, disableButton;
// callback function for listener bellow
clickHandler = function() {
document.querySelector(element).classList.toggle("yellow");
};
activateButton = function() {
button.addEventListener("click", clickHandler);
};
disableButton = function() {
button.removeEventListener("click", clickHandler);
};
// when first argument is 1, make the button functional, otherwise disable its functionality
if (toggleVal === 1) {
activateButton();
} else {
disableButton();
}
};
// when onButton is clicked, call main function with arguments
// this works
onButton.addEventListener("click", function() {
toggleButtons(1, mainButton, "body");
});
// this fails to disable the button
offButton.addEventListener("click", function() {
toggleButtons(0, mainButton);
});
.yellow {
background-color: yellow;
}
<button type="button" id="mainButton">mainButton
</button>
<button type="button" id="onButton">onButton
</button>
<button type="button" id="offButton">offButton
</button>
<p>mainButton: toggles background color on click
</p>
<p>onButton: turns on mainButtons's functionality</p>
<p>offButton: supposed to turn off mainButton's functionality</p>
var mainButton = document.querySelector("#mainButton");
var onButton = document.querySelector("#onButton");
var offButon = document.querySelector("#offButton");
var element; // declare the element here and change it from toggleButtons when needed.
function clickHandler() {
document.querySelector(element).classList.toggle('yellow');
}
function activateButton(button) { // You missed this part
button.addEventListener('click', clickHandler);
}
function disableButton(button) { // You missed this part
button.removeEventListener('click', clickHandler);
}
function toggleButtons(value, button) {
if (value === 1) {
activateButton(button); // You missed this part
} else {
disableButton(button); // You missed this part
}
};
onButton.addEventListener('click', function() {
element = 'body'; // you can change it to some other element
toggleButtons(1, mainButton);
});
offButton.addEventListener('click', function() {
element = 'body'; // you can change it to some other element
toggleButtons(0, mainButton);
});
Below code helps to toggle between two functions from an eventListener:
var playmusic=false;
function playSound() {
const audio = document.querySelector(`audio[data-key="${event.keyCode}"]`)
audio.currentTime = 0
audio.play()
playmusic=true;
}
function stopSound() {
const audio = document.querySelector(`audio[data-key="${event.keyCode}"]`)
audio.pause()
playmusic=false;
}
window.addEventListener('keydown',
function(){playmusic?stopSound():playSound()} )
I have a piece of code that hides an element on mouseout.
The code looks like this:
var myMouseOutFunction = function (event) {
setTimeout(function () {
$(".classToHide").hide();
$(".classToShow").show();
}, 200);
};
This produces a result very close to what I want to do. However, I want to wait the time on the timeout (in this case 200 ms) then check to see if my mouse is still "out" of the element. If it is, I want to do .hide() and .show() on the desired elements.
I want to do this because if a user slightly mouses out then quickly mouses back in, I don't want the elements to flicker (meaning: hide then show real quick) when the user just wants to see the element.
Assign the timeout's return value to a variable, then use clearTimeout in the onmouseover event.
Detailing Kolink answer
DEMO: http://jsfiddle.net/EpMQ2/1/
var timer = null;
element.onmouseout = function () {
timer = setTimeout(function () {
$(".classToHide").hide();
$(".classToShow").show();
}, 200);
}
element.onmouseover = function () {
clearTimeout(timer);
}
You should use mouseenter and mouseleave of jquery. mouseenter and mouseleave will get called only once.and use a flag if to check if mouseenter again called.
var isMouseEnter ;
var mouseLeaveFunction = function (event) {
isMouseEnter = false;
setTimeout(function () {
if(isMouseEnter ){ return;}
$(".classToHide").hide();
$(".classToShow").show();
}, 200);
};
var mouseEnterFunction = function(){
isMouseEnter = true;
}
Use a boolean flag:
var mustWait = true;
var myMouseOutFunction = function (event) {
setTimeout(function () {
if(mustWait){
mustWait = false;
}
else{
$(".classToHide").hide();
$(".classToShow").show();
mustWait = true;
}
}, 200);
};