This Meteor client template event fires multiple times, from 2 to 23 times depending where I click on the screen.
Why and how to fix it?
Template.myT.events({
'click *:not(canvas)': function(e) {
console.log(e.target);
return;
});
here is the output from the console
You register the click listener on all elements except canvas elements. When you click on a <span> element inside an <p> element, you do not only click on the <span> element, but also the <p> element. This is the reason why the click listener is called multiple times (the event propagates). To prevent that behaviour, use e.stopPropagation() in your click handler.
Related
I'm fairly new to Google Tag Manager and am trying to set up my first custom event.
In my html I have, in the very top of my head:
<script>
window.dataLayer = window.dataLayer || [];
dataLayer.push({"event": "testEvent"});
</script>
And in Google Tag Manager, I've created a trigger that uses my "testEvent":
Additionally, I've created a tag that uses this custom event:
Lastly, when I debug I see that both my custom event and tag show up:
However, when I click on the DOM element that is supposed to trigger that custom event, nothing happens.
I have tried swapping out my custom event trigger for just the built-in click trigger and that works fine, so that tells me that I have my tag itself set up correctly.
Am I missing a step? Is there something more I need to do to make a custom event work? Like I said, I know I could use a regular click trigger in this test case, but in my actual project, I cannot just use the regular click trigger.
Thanks for any help you can offer!
it is a configuration issue. If I understand correctly, you're trying to trigger an event tag when someone clicks on an element with a specific css class.
To achieve this, you will need to:
Go to the "Variables" screen in GTM. On the top portion of the screen, there is the "Built-in Variables" section. Click on the "CONFIGURE" button, a side menu should pop up. Look for the "Click Classes" under the "Clicks" section. Check the checkbox beside "Click Classes", close this menu, should show now see the "Click Classes" variable name under "Built-in Variables".
Go to the "Triggers" screen in GTM. Create a new trigger of the type "All Elements" under the "Click" section. When the configuration for this trigger comes up, select "Some Clicks" under "This trigger fires on". You should see 3 input fields come up for the condition of this trigger. In the first select box, you should see "Click Classes" as one of the available selections, pick that. In the next box, select the appropriate comparison type, we will choose "equals" in this case. In the last input box, put in "search__input" or the name of the css class you want to trigger on.
Go back to the "Tags" screen in GTM. Add this trigger to the tag you want and voila!
If your custom event is pushed only for "search_input" clicks, then you can the modify your trigger to "All Custom Events"
else as #GTMGuy said you need to push the event on "search_input" click event.During event trigger in GTM preview, click on the event and check the value of Variables - "Click element" whether it matches your trigger condition.
You need to add the element clicks using JQuery or any other language, as well as change the trigger to fire on "All Custom Events"
for example say I have a chat button
<script>
var dataLayer = dataLayer || [];
$('.chatBtn').click(function (e) {
dataLayer.push({
'event': 'chat-click'
});
});
</script>
The event should be on that particular element click .
Looking at your custom event it is not attached to any element click
I am having trouble tracking a click using Google Tag Manager.
I have set up a click event, and a click trigger. The click trigger's conditions are: Click Class- Equals - next-step`
Screenshots:
This is how I created the tag. This is the trigger
Currently the problem is that the trigger is not firing.
Your problem is occuring because there are two different elements that are able to be clicked: next-step and ng-binding.
If you click on the text itself, it will have the class ng-binding.
Whereas, if you click anywhere else on the button, it will have the class next-step.
Because your ng-binding is not a unique attribute to fire this event from, I would create a DataLayer variable (lets call it Parent Node Class) with the following selector:
gtm.element.parentNode.className
This will return the className of the parent node, reletive to the element clicked. This means that users clicking on ng-binding will have the Parent Node Class of 'next-step'.
Using this, you can have two triggers for your tag.
1) Click Classes equals next-step
2) Parent Node Class equals next-step
Because triggers work with an 'or' condition, this means that if either of these results are satisfied, then it will fire the tag.
I have some buttons in a BorderContainer and I would like to execute the attached event when the user click on the buttons. But, the parent has a click event too.
I would like to execute the action A when the user click on the button A, the action B with the button B and the action C if the user click on the background.
Actually, if I add the eventHandler to the bordercontainer, the buttons don't work anymore. No mouse cursor, no mousehover effect, and if you click on it, it's the action C which is launched.
My bordercontainer:
useHandCursor = true;
mouseChildren = false;
buttonMode = true;
In both buttons and bordercontainer I use the MouseEvent.Click event and both call the same function "click" which will execute different actions depending the properties of the event.target.
My bad. Thank to Timofei.
Both the bordercontainer and the click function were wrong.
In the bordercontainer, mouseChildren had to be set at true, which will let the children get the event too.
And in my click function, using event.target was a bad idea. It tried to get the properties from the bordercontainreskin. I had to use event.currentTarget instead. Finally I added a event.stopPropagation() to prevent the bordercontainer to catch the event too when the user click on a button. And now, everything is working well now.
Thank you
I have a scenario where...
1.) Have created a div with a dropdown list and ok, cancel button
2.) On document ready - registering div created on step 1 into a jQuery dialog
3.) on a javascript button click - I am opening this dialog box.
4.) Now, the problem is - the jQuery dialogbox which I have created, needs to be used by other button clicks as well on same page. Now, my div's (which is a dialog at runtime using jQuery) ok button click is already engaged with a javascript function (button1 click) and I can not associate other button's click events with it - thus stuck up here and have no clues or hit to resolve this.
Anyone have faced this issue in asp.net, jquery earlier? Can someone provide a guidance?
Why you cant associate another event?
buttons will have different id. Is it?
$('#button1').click(function() {
alert('Handler for button 1 .click() called.');
});
$('#button2').click(function() {
alert('Handler for button 2 .click() called.');
});
Is this not possible in your case.?
Options:
1) disassociate the click handler when the function opens the div, then later in the function of opening the div associate a click handler to the button.
2) create multiple buttons toggle them all hidden, associate the click handler to each button you want. When the div is opened do a check to see which button to toggle to visible.
3) create no buttons but have a function create the button on the fly. When the div is opened, create the button for that div by calling the function and passing in a code telling it which button to open and what to associate to the click handler (this can be stored in an array and all that is passed in is the key).
Depending on the application, I have used all of these methods. The last one can have a twist that allows it to call an ajax server based application to get the button text and functionality (stored in a database), this saves you from having to load an array with button data, and also allows for easier expansion of the application.
I have a VBox, I assigned a handler to click, and inside the VBox I have components such as images and texts with no handler assigned for click. Would the click function be called when I click on the text and image? If not how can I make it so without assigning handlers individually, but on the container level?
Thanks
Click events "bubble" in Flex. When you click on an images, it bubbles up to its parent, then that parent's parent and so on until there are no more parents left.
If any of these have click listeners they will trigger when they are reached in the bubbling process.
Also in the event the currentTarget will refer to the object that has the listener, and the target will be what was actually clicked.
So in your case if they click the image, the event will bubble up to the container triggering the event, in your listener function the clicked image will be the event.target and the container will be the event.currentTarget.
Also in the bubbling process, it actually starts from the root parent down, this is called the capture phase, then bubbles back up. Your event will trigger when it bubbles back up unless you specify useCapturePhase = true in the event listener. This is how you can stop an event from going to its children. If you use the capture phase then call event.stopPropagation() inside the event listener then the container will receive the event but the child image will not.
It's taken an hour for an answer to this question... it probably would have been faster to just try it. :)
But yes, click events bubble up to parent containers. Adding the handler to the VBox should be fine.
I was pretty sure that containers, such as VBox do not dispatch click events; unless they are bubbled up from the children.
However, clicking on items in your container should trigger the listener on your container, as the Click event bubbles.