Meteor makes it easy to add event listeners natively, but how would one go about removing an event listener natively?
Template.dashboard.events({
'click #dashboard-ul li': function(e) {
}
});
I want to remove the click event on '#dashboard-ul li' in the above through Blaze or Meteor's native remove event listener methods.
I could not find any mention of event removal in the meteor docs besides removing the element outright.
Related
We are currently experimenting with Google Tag Manager. Beside couple of small pixels we want to include Google Analytics 4.
According to the documentation we need to include the tag "Google Analytics: GA4 Configuration" which inserts gtag.js into the page. This means that we have two containers on a single page.
We have multiple events that are fired on click of a button. After the events are fired we want to navigate the user to a different page. To ensure that all tags are fired before we navigate to a different page we use the provided eventCallback method.
dataLayer.push({
event: 'add_to_cart',
...
eventCallback: function(containerId, eventInformation) {
...
},
});
However, due to the fact that we have two containers embedded the eventCallback is fired twice (one time for each container).
How can we know/guarantee that all containers finished firing? So far I've seen that people suggest to check if a specific container is finished (https://support.google.com/optimize/thread/3463880/optimize-firing-multiple-pageviews-and-eventcallbacks-when-implemented-through-tag-manager?hl=en) but that doesn't look like a feasible solution to me, because the order in which the containers finished is not guaranteed.
An alternative approach would be to count the number of containers that have already fired, but that would require to hardcode the number of available containers.
To me it seems like there must be a better solution than the approve described approaches. Does anybody have experience with it? Are there any best practices?
For me all events in the page were already built for GTM, and GTM Handels triggering events to GA4 & UA. So I only needed the callback for GTM. Before adding the blow solution to my code the callbacks were firing twice causing multiple issues. My solution:
const buildGtmCallback = (callback) => {
//GA4 is also a container, so need to fire callbacks only once, for GTM container
//GA4 containerId starts with G-
return (containerId) => {
if (containerId.startsWith("GTM-") && typeof callback === "function") {
callback();
}
}
}
And then whatever you wish to be fired only once:
window.dataLayer.push({
'event': 'add_expense',
'eventCallback': buildGtmCallback(() => {
console.log('Call me only once');
})
});
And as I mentioned - the code fires event to GTM, which (if needed) will fire those to GA4, UA or whatever is defined. According to google docs “eventCallback” is called after all of those were called so I found this solution to work without issues
I want to prevent my GMaps object from adding unneeded listeners.
var map = new google.maps.Map(mapWrapperElem, mapOptions);
map.addListener("click",function(event){
// Do stuff
});
How do I prevent map from adding a "click" listener if there's already a "click" listener on it?
This cannot be achieved. There is not way to detect if there is an event listener added or not.
There is a rather complex method of doing it:
See: https://stackoverflow.com/a/47414605/7138697
What should happen is a user can add a subdocument with the big [+] button, but cannot remove it without a prompt. Basically just deleting the [-] button. How do I do that? Can I do that?
If it can't be done I have other solutions to my problem, but that seems to defeat the purpose of the using this package.
Yes, you can remove the [-] button.
For add new document you have to write a following code in the events.
Template.TemplateName.events({
"click .autoform-add-item" :function(){
//This allow to remove the current [-] button as well.
setTimeout(function(){
$('.autoform-remove-item').remove();
});
},
});
For add edit document you have to add the remove [-] button code in onRendered block as well, like :
Template.TemplateName.onRendered(function () {
$('.autoform-remove-item').remove();
});
#Note :: Please make sure then you have "autoform-add-item" class on [+] button and "autoform-remove-item" on [-] button. You can check these classes using inspect element.
I have a custom MXML component which has a change event declared as:
<mx:Metadata>
[Event(name="change", type="flash.events.Event")]
</mx:Metadata>
The problem is that this event is dispatched whenever I change ANYTHING inside the component including a simple var. There are times when I want to be able to change the value of a var in the component without dispatching a change event. Is there a simple way of disabling the change event and then re-enabling it once I have made the change I want?
I tried to use removeEventListener("change") but it appears I can only do that for a function that has an event listener added. Same for removeEventListener(Event.CHANGE).
Surely there must be a simple way of disabling events declared in
mx:Metadata
yes there are methods on event you can use. So although the event is still dispatched, this gives you complete control of what happens with it.
// first set the useCapture flag to true
// this tell flex that onChange gets the event before it starts bubbling
myCustomComponentThatDispatchesALotOfChangeEvents.addEventListener(Event.CHANGE, onChange, true);
private function onChange(event:Event):void{
// here is the method you want
// this stops the event from bubbling and lets you handle
// all functionality in this listener only
event.stopImmediatePropogation();
// now look at what happened and see if you want to
// do anything else based on what actually changed
}
as a side note, you can also look at Event.preventDefault() which cancel's the events default behavior
"change" is also a flex thing. It you want to only dispatch the event in one particular scenario, make a new event class that SubClasses Event like MyChangeEvent. The when you make your change...
dispatchEvent(new MyChangeEvent(MyChangeEvent.STUFF_CHANGED))
then
myCustomComponentThatDispatchesALotOfChangeEvents.addEventListener(MyChangeEvent.STUFF_CHANGED, onChange);
Do I need to remove event listeners on AsyncResponder events?
i.e.
public function DeleteItem():void
{
var asyncResponse:AsyncResponder = new AsyncResponder(DeleteItem_Result, DeleteItem_Fail);
_myService.DeleteWorkout("test", asyncResponse);
}
private function DeleteItem_Result(event:Event):void
{
//If I do need to remove them, how do i remove the async responder event listeners?
}
If I do need to remove them, how do I do it?
Do I need to remove event listeners on AsyncResponder events?
No, you do not. If you are creating the AsyncResponder and using ot over and over again, then by all means leave the listeners in there.
However, in some cases, if you won't be reusing the component over and over; I would recommend you do remove the event listeners, as that will remove a dependency pointing at the asyncResponder which may allow it to be released for garbage collection as appropriate.
In the Adobe Flex Framework it is pretty common to add and remove listeners "as needed." We use the approach in the Flextras Calendar, for example, when dealing with effects. Before starting the effect we add some event listeners for 'effect end'. Those listeners are removed in that effect end method.
Update:
To remove an event listener you would use code similar to this:
asyncResponder.removeEventListener('result' ,UpdatePics_result);
asyncResponder.removeEventListener('fault' ,UpdatePics_fault);