Menu
I am trying to add a click event to the document in another click event attached to a button. However, the second click event is fired right away as if the event overlaps. I looked into stopping propagation, using a timeout, removing the listener, preventDefault(), but I've had no success.
This is an example of what I am trying to do.
document.getElementById("test").addEventListener('click', first);
function first(){
document.addEventListener('click', second);
}
function second(){
alert("I'm not suppose to appear after the first click, only the second.");
}
For testing, I am using a simple button
<button type="button" id="test">Click</button>
I am doing this without JQuery. Is this possible?
251
If you just need to trigger a click event, you can omit the line that begins with for( . @Parag: Read it again. The loop is to click the same link 50 times, which is what it does.
The addEventListener() methodYou can add many event handlers of the same type to one element, i.e two "click" events. You can add event listeners to any DOM object not only HTML elements.
Use modern JavaScript! EventTarget. addEventListener("click", function() { // Do something cool }, {once : true}); A Boolean indicating that the listener should be invoked at most once after being added.
We can pass an object as an argument to the addEventListener method and specify that the event is only handled once. This is achieved by passing the property once to the object. If we set once to true, the event will only be fired once.
Most of the elements in the DOM support click () method. We can leverage this method to trigger click event on any element. When you call click () method on an element, a click event is dispatched and event listener in response will execute event handler function. We are going to cover the same technique.
As you click on the button, the .on method will attach an event handler on click event of the button. Have a look at live demo of this example along with code: As you can see, the jQuery on method specifies click event along with calling a function animateex.
Assign the "onclick" event to the window object: window.onclick = myFunction; // If the user clicks in the window, set the background color of <body> to yellow. function myFunction () {.
The $.on method is linked with the button’s click event. As you click on the button, the .on method will attach an event handler on click event of the button. Have a look at live demo of this example along with code: As you can see, the jQuery on method specifies click event along with calling a function animateex.
Try using event.stopImmediatePropagation()
document.getElementById("test").addEventListener('click', first);
function first(e){
e.stopImmediatePropagation();
this.removeEventListener("click", first);
document.onclick = second;
}
function second(){
alert("I'm not suppose to appear after the first click, only the second.");
}<button type="button" id="test">Click</button>If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
