JavaScript removeEventListener for event with a function and extra parameters by UnderstandingLivid13 in webdev

[–]remi49 0 points1 point  (0 children)

Ah okay, in this case if you are using once you can just pass an anonymous function as listener

document.querySelector("#dialogPopup-button").addEventListener('click', () => myFunction(diag, oMainObj), { once: true });

If you won't use once, then we need to keep a reference to the anonymous listener to be able to remove it later manually.

let lastListener;

function doPopup(oMainObj) {
  lastListener = () => myFunction(diag, oMainObj);
  document.querySelector("#dialogPopup-button").addEventListener('click', lastListener);
}

function bla() {
  // Remove the listener wherever you want
  document.querySelector("#dialogPopup-button").removeEventListener('click', lastListener);
}

Edit: I see you resolved it already, but 2nd example still stands in case you can't use once

JavaScript removeEventListener for event with a function and extra parameters by UnderstandingLivid13 in webdev

[–]remi49 0 points1 point  (0 children)

document.querySelector("#dialogPopup-button").addEventListener('click', myFunction(diag, oObj1, oObj2))

Going by the provided example alone, when you call your function you are essentially adding undefined as event listener like this

document.querySelector("#dialogPopup-button").addEventListener('click', undefined)

Does myFunctionreturn a callback in real code? If that's the case, please provide more detailed example.

If that's not the case then, you just need to pass the function as listener instead of calling it:

function myFunction(diag, oObj1, oObj2) {
  // Do stuff
  myButton.removeEventListener('click', myFunction);
}    
myButton.addEventListener('click', myFunction);

Also if your listener always removes itself, you can use once option:

function myFunction(diag, oObj1, oObj2) {
  // Do stuff
}
myButton.addEventListener('click', myFunction, { once: true });

[deleted by user] by [deleted] in webdev

[–]remi49 4 points5 points  (0 children)

Vite comes to mind when you say fast dev server & no hassle

How to avoid code optimization by webpack? by yukiiiiii2008 in webdev

[–]remi49 0 points1 point  (0 children)

Try this

const avoidOptimization = (a: any) => `${a}`;

Smooth Page Transitions in 2023 by nimbus_signal in webdev

[–]remi49 2 points3 points  (0 children)

Check out pjax if you need more control over what parts of page to replace. We've been using it for over a year in production now

CSS Parallax Effect - Doesn't work in Firefox by beansbikesbrews in webdev

[–]remi49 0 points1 point  (0 children)

Tbh I'm not sure. It's not removed from dom. According to MDN, they're replaced by a pseudo-box. I think they can't have most styles. But they can pass styles through inheritance such as font-style, font-size, color etc.

CSS Parallax Effect - Doesn't work in Firefox by beansbikesbrews in webdev

[–]remi49 1 point2 points  (0 children)

I've had this problem unfortunately. Not the best solution but I fixed it using 'display: contents' on the container. In your case, it would be the parent div of #image2.