Sample HTML Code:
<div class="first-div" (click)="onClickCustomCard(d)">
Some text..
Images...
<input type="checkbox">
</div>
so my problem is that when i try to click the "input type checkbox" it also trigger the onCLickCustomCard(). Is there a way to not auto trigger the onC;ickCustomCard() when i click the input?
Thanks for helping guys...
You do this by stopping the propagation of events when you click on the input element.
Events can bubble up in the dom tree, meaning that every parent element also receives the event, in your case the click event.
The stopPropagation() method of the Event interface prevents further propagation of the current event in the capturing and bubbling phases.
Edit, some notes that are not directly related to your question: It's not good practice to add click events to divs, because this doesn't make them focusable via keyboard. So you can only click them with your mouse but not tab to them and click them with space or return key. If you use a button or link this behaviour is already implemented for you.
function onClickCustomCard() {
console.log('clicked Card')
}
document.querySelector('.first-div input').addEventListener('click', function(e) {
e.stopPropagation();
});
<div class="first-div" onclick="onClickCustomCard()">
Some text..
Images...
<input type="checkbox">
</div>
Related
Assuming the following HTML:
<div *nfFor="let option of options" (click)="option.check = !option.check; selectionChanged.emit(option)">
<input type="radio" [(ngModel)]="option.check" (ngModelChange)="selectionChanged.emit(option)"/>
...additional elements related to input
</div>
I want to prevent the event from being emitted twice when clicked on the div instead of directly on the input. As far as I know the click is only registered once, if clicked directly on the input it'll fire that but if clicked outside of the input but within the div it'll execute the (click) statement.
So anyway the question is wether there will be two emits on selectionChanged when clicked on the div as there's also an ngModelChange on the input element itself. Does ngModelChange recognize changes on the ngModel bound property from outside the element it is attached to and therefore fire?
NOTE: I know the radio button has two event bindings which isn't the right way to go about things in Angular (I think, two chefs in the kitchen?) but that's something i'll fix later if necessary
Hey I have a div which is wrapped by a Link component, and inside that div I have more buttons, but the problem is, when I click on the inner smaller buttons, I actually click on the Link component as well, so I get redirected which is not what I want... How do I fix this?
it seems as though both the link and the button get clicked but if i am intending to click the button only i want to avoid the parent link.
What I mean is, the Link is used to navigate to some URL when you click on it. Putting elements inside that for other tasks. like a blog post, you click on the parent it will redirect you, but on the child the button will allow you to delete it
was coding this in nodejs react so i was using onClick events
example
<Link to="/blog-post">
<div className="link-post-container">
...blog
<button className='deleteButton'></button>
</div>
</Link>
I have tried event.stopPropagation on the button but it still doesn't seem to do anything. Is it because the Link is an href instead of a onClick?
SOLUTION
so using some of the possible solutions below i started messing around and noticed by in the onClick of the deleteButton, if i add the following in, it works:
event.preventDefault()
with this, the redirect because of the href does not occur anymore and only the button click event will take place
const handleClick = event => {
event.stopPropagation()
// then write rest of your onclick code
}
<button className='deleteButton' onClick={handleClick}></button>
The click event propagates from the button upwards in the DOM tree until it reaches the root (simplified explanation - you can learn more about event propagation here). This is why the link also registers it and runs its onclick handler, redirecting you to another site.
You can call event.stopPropagation() inside your button's onClick handler to stop the event from reaching the encapsulating link.
source
jsfiddle : https://jsfiddle.net/leiming/5e6rtgwd/
class Sample extends React.Component {
onInputFocus(event) {
console.log('react input focus')
}
onSpanFocus(event) {
console.log('react span focus')
// event.stopPropagation()
}
render() {
return ( <span onFocus = {this.onSpanFocus}>
react input: <input type="text"
onFocus = {this.onInputFocus} />
</span> )
}
}
ReactDOM.render( < Sample / > ,
document.getElementById('container')
);
<div id="container">
<!-- This element's contents will be replaced with your component. -->
</div>
<div>
<span onfocus="(function(){console.log('normal span')})()">
normal input:<input type="text" onfocus="(function(){console.log('normal input focus')})()">
</span>
</div>
jsfiddle : https://jsfiddle.net/leiming/5e6rtgwd/
Using React, onFocus in <input/> will bubble which is not same as usual HTML5.
Could anyone give me the refer doc why focus bubbles with React?
focus events do not bubble, so you're correct that the behavior in React differs from that of the DOM. The DOM has a focusin event that does bubble; here's a demonstration:
<div>
<span onfocus="(function(){console.log('span focus')})()">
onfocus: <input type="text"
onfocus="(function(){console.log('input focus')})()">
</span>
</div>
<div>
<span onfocusin="(function(){console.log('span focusin')})()">
onfocusin: <input type="text"
onfocusin="(function(){console.log('input focusin')})()">
</span>
</div>
Looking through the React source code, it seems this was intentional; the code checks for whether or not the browser supports the focus event with capturing, and implements it via the focus event with ReactEventListener.trapCapturedEvent instead of ReactEventListener.trapBubbledEvent. This is necessary because React implements its synthetic event system using event delegation, and so needs to use either capturing or bubbling for all its event handling. The article linked to in the comment explains how this works:
The problem is that these events do not bubble up. A focus or blur event on a link fires only on the link itself, and not on any ancestor element of the link.
This is an ancient rule. A few events, most notably focus, blur, and change, do not bubble up the document tree. The exact reasons for this have been lost in the mist of history, but part of the cause is that these events just don't make sense on some elements. The user cannot focus on or change a random paragraph in any way, and therefore these events are just not available on these HTML elements. In addition, they do not bubble up.
...
Except when you use event capturing.
...
One of the most curious conclusions of my event research is that when you define event handlers in the capturing phase the browser executes any and all event handlers set on ancestors of the event target whether the given event makes sense on these elements or not.
It seems pretty likely that the React team decided to simply make the event always bubble (which, to be honest, is what I expected from the DOM spec as well until I read your question). The browser implementations don't seem to be consistent; one issue comment mentions that focus events bubble in Firefox, but I was not able to reproduce that on a recent version. However, using an onfocusin attribute or using addEventListener("focusin", ...) also didn't work in FF. So it's possible that this was simply an attempt at normalizing the events across browsers.
All that said, it does seem there is perhaps a bug where the .bubbles property on a SyntheticFocusEvent is false instead of true.
A weird bug caused me a lot of headaches recently, and I've been able to dumb it down to the simplest form possible. See this fiddle : http://jsfiddle.net/PgAAb/
<input type="text" id="foo" placeholder="Change me!"><br>
<input type="text" id="bar" size="30" placeholder="Dummy control to switch focus">
$('#foo').change(function() {
console.log('Changed!');
$('#bar').focus();
});
Basically, when you change the first textbox and use the mouse to click elsewhere in the document, the change event fires, as usual. However, if you change the value, and hit the enter key to trigger the change, the event fires twice.
I've noticed the bug is only with Chrome. Firefox does not trigger the event twice, and IE does not even support the enter key to trigger change on an input.
I guess that happens because of the focus switching inside the event callback. Is there any way around this?
The focus() on other control in your change eventhandler call the change event in chrome because it unfocus "blur" your current control if the value is different.
This bug is not new, you can take a look at this bug ticket on jQuery : http://bugs.jquery.com/ticket/9335
You can work around this by disabling the change eventhandler before to remove the focus on your control.
Here a little exemple of what I want to say:
$('#foo').change(changeHandler);
function changeHandler() {
console.log('Changed!');
$(this).off('change').blur().on('change', changeHandler);
$('#bar').focus();
}
Also, you can workaround this bug with just blur your input on Enter key:
jQuery('input').keydown(function(e){
if(e.keyCode==13) jQuery(this).blur();
});
As you can see on this page jQuery mobile renders an "X" at the right of the entered text in an input search box. How can I attach to the click-event of that "X"?
$('.ui-input-clear').live('click', function(e){
alert('click!');
});
Is a good starting point. I use live as the searchbox isn't necessarily in the page on load.
This of course is nonspecific by using the class but if required can be made so.
Update: As of jQuery 1.7 .live is deprecated in favour of .on: http://api.jquery.com/on/
$('.ui-content').on('click', '.ui-input-clear', function(e){
alert('click!');
});
bind click to the whole thing and then determine what was clicked with event.target which holds the originally clicked element as the event bubbles up.
A simple if that checks for some classes should do.
Start from binding click and sniffing what's clicked:
$(theinput).click(function(e){
console.log(e.target);
});
Tested with jQuery 1.9 and jQuery Mobile 1.3:
I Have the input inside a form so, suscribed the event to an element inside it:
<form id="frmBusqueda" action="frmBusqueda">
<input name="txtBusqueda" id="txtBusqueda" placeholder="Nombre de producto"
value="" type="search" data-clear-btn="false" onkeyup="activarFiltro();">
</form>
$('#frmBusqueda').on('click', '.ui-input-clear', function (e) {
alert('click!');
})