Enforce event propagation [duplicate] - javascript

This question already has answers here:
mousedown. propagation on siblings event.targets
(3 answers)
Closed 3 years ago.
fiddle
when I click on the respective "Click me!" buttons only one console.log (click event) is fired.
Why is the propagation stopped here? The click should to through "Click me!" into the button underneeth with the ".......".
<button style="position: absolute" onclick="onClick()">Click me!</button>
<button style="height: 4em" onclick="onClick()">...............................................</button>
On the web everyone whats to stopPropagation, but I want to enforce it!
The desired outcome is to get two events firing from a single click.

Events propagate to parent elements, not sibling elements, so event propagation won't help you here. (The fact that you've changed the layout to make it look like the buttons are nested doesn't affect this.) If you need to trigger both events you'll need to do it manually, or actually nest the elements (changing the parent to something other than a <button>, because they can't be nested):
onClick = function() {
console.log("onclick triggered");
}
<div style="height: 4em; border: 1px solid;" onclick="onClick()">
<button onclick="onClick()">Click me!</button>
...............................................
</div>

Related

Javascript useCapture click event handler not triggering on button with image

I encounter this a lot, and normally fix it with a hack by adding the style "pointer-events: none" to the children of the button. However once and for all I would like to understand why this code does not work.
For example this answer says:
Example <div> <ul> <li></li> </ul> </div> In the structure above, assume that a click event occurred in the li element.
In capturing model, the event will be handled by the div first (click
event handlers in the div will fire first), then in the ul, then at
the last in the target element, li.
If I try the quoted example above, all I ever see is the <li> event handler occuring, not one for the <li> and <div>
Say I have a button with an image. If one clicks the button, its runs the event handler, if one clicks the image on the button it does not run the event handler. Okay that is understandable, except I have specified useCapture = true in the event handler, so I expect the event handler to start capturing at the root html element, and work its way down to the actual element that was clicked (which is interrupted by the preventDefault() below)..
function working(event) {
if (event.target.id == "BUTTON") {
alert("Its working!")
event.preventDefault();
}
}
document.addEventListener('click', working, true);
<button id="BUTTON" type="button">
<img src="https://www.google.com/images/branding/googlelogo/2x/googlelogo_color_92x30dp.png">
Works on text but not image</button>
I keep reading about bubbling vs capture, and I think I understand it, but clearly I don't because the code I write doesn't work.
This is because you use event delegation, so the capturing is done on document. useCapture makes no sense here.
One solution is to use closest on evt.target to retrieve the first parent with id #BUTTON and act on it.
See also
function working(event) {
if (event.target.closest("#BUTTON")) {
alert("Its working!");
}
}
document.addEventListener('click', working);
<button id="BUTTON" type="button">
<img
src="https://www.google.com/images/branding/googlelogo/2x/googlelogo_color_92x30dp.png">
Works on text but not image</button>
Another solution is to add the listener to the element itself (using [useCapture = ]true). In that case the capturing starts on the element the event listener is added to.
function working() {
alert("Its working!");
}
document.querySelector(`#BUTTON`).addEventListener('click', working, true);
<button id="BUTTON" type="button">
<img
src="https://www.google.com/images/branding/googlelogo/2x/googlelogo_color_92x30dp.png">
Works on text but not image</button>
here you have double equals sign
(event.target.id == "BUTTON")
there only has to be one and it works
(event.target.id = "BUTTON")

Want to fire trigger click event with only JavaScript [duplicate]

This question already has answers here:
How can I trigger a JavaScript event click
(9 answers)
Closed 2 years ago.
I want to fire an trigger click event with JavaScript. I did it with jQuery like this:
$('button[type="submit"]').trigger('click'):
I want the same with JavaScript.
You can use
document.getElementById('buttonID').click();
in vanilla JS
function callClick() {
document.querySelector('button[type="submit"]').click();
}
<button type="submit" onmouseover="callClick();" onclick="alert('Click called!')">Submit</button>
This should do the trick:
document.querySelector('button[type="submit"]').click();
you can use click . The HTMLElement.click() method simulates a mouse click on an element.When click() is used with supported elements (such as an <input>), it fires the element's click event. This event then bubbles up to elements higher in the document tree (or event chain) and fires their click events.
Syntax
setTimeout(function(){
let submit =document.getElementById('submit');
submit.click();
},2000)
function submited(){
alert('submitted');
}
<form onsubmit="submited()">
<input type="text">
<input type="submit" id="submit">
</form>

Prevent multiple click event when clicking child element [duplicate]

This question already has answers here:
Stop mouse event propagation
(15 answers)
Closed 5 years ago.
I have a list of elements.
Each element have a global click event and a child icon which should also be clickable.
Example :
<div class="parent-element" (click)="clickParent()">
<span class="button" (click)="childClick()">
</span>
</div>
For now when I click on the span, both click are fired. How can I separate it from the parent click event ?
Catch the event on both methods (parent and child) and call event.preventDefault() or event.stopPropagation()

How to call a function within a function

function btn1(){
alert('hello')
}
function btn2(){
alert('anchor')
}
I want to call the function btn1 and function btn2 separate on clicking the div. As it is shown below.
<div onclick="btn2()" style="position:relative">
<div style="width:50%; float:left; height:50px; background:#ddd">
</div>
<input type="button" value="hello" onclick="btn1()"/>
</div>
If I am getting this right you are probably experiencing bubbling. You might want to read about bubbling and event propagation as it will probably be clearer than what I can try to explain. But to solve your issue you want to take a look at jquery's
event.stopPropagation()
http://www.w3schools.com/jquery/event_stoppropagation.asp
The Click Event of the button bubbles his way up to the div. Take a look here how to prevent this:
How to stop event propagation with inline onclick attribute?
I recommend you use addEventListener in favor of inline event handler.

Event is firing Two times

Hi I am binding onclick event to parent as well as child (same method). Event is getting fired two times How to avoid this?
<div id="sparentId" onclick="javascript:somemethod()" >
<button id="childId" onclick="javascript:somemethod()"></button>
</div>
Onclick of Div the event is getting fired two times.
Try:
<button id="childId" onclick="javascript:somemethod(event)"></button>
JS code
function somemethod(event){
event.stopPropagation();
}
The reason that the onclick event is showing twice, is because there is something called event bubbling in JavaScript.
Take a look at the following:
This image shows that, if the <img> was clicked, the event would "bubble" up to the <p> tag, then to the <div>, then to the rest of the document. If there was an onclick event on the <p> tag, and even if the <p> tag was not clicked (but the <img> was), the event would necessarily "bubble" all the way up the DOM, and would still continue when an event was fired on the <p> tag (in other words, if you also had an onclick event on the <div>, then that would fire as well.
So what you should do is this:
<div id="sparentId" onclick="javascript:somemethod()" >
<button id="childId"></button>
</div>
In other words, as I explained above, you wouldn't need the extra onclick event handler in your button anymore, because when your button is clicked, the event bubbles up to the parent div, which would fire that event.
If you want to use your original HTML code, that's fine as well - just add this:
function somemethod(evt) { // the method you run
// some code
evt.stopPropagation(); // stops bubbling
}
This effectively stops the event from bubbling up your DOM tree.
It is getting called twice because you are calling it twice, i.e. once in the div click and once in the button click. the button is already inside the div.
<div id="sparentId" onclick="javascript:somemethod()" >
<button id="childId" onclick="javascript:somemethod()"></button>
</div>
try
<div id="sparentId">
<button id="childId" onclick="javascript:somemethod()">Click Me</button>
</div>
use
event.stopImmediatePropagation()

Categories