Quick question that I am probably just having a hard time asking correctly and therefore having a hard time figuring out how to accomplish this -
http://jsfiddle.net/RsKUS/
When I click on the div I want to take one action but if there is a button nested inside the div I only want to perform that action, not both.
<div data-bind="click: clickOne">
<p>It's here too...</p>
<button data-bind="click: clickTwo">Child</button>
</div>
You need to set the clickBubble: false on the inner handler to prevent the click event bubbling:
<div data-bind="click: clickOne">
<p>It's here too...</p>
<button data-bind="click: clickTwo, clickBubble: false">Child</button>
</div>
Demo JSFiddle.
See also in the click binding documentation: Note 4: Preventing the event from bubbling
Related
As you can see in the code, there are two onClick() methods. Both appear on the UI. But when I click on the second onClick() method, it doesn't call the method but the first one calls. I am not able to understand why this is happening. Please help.
<div class="col-sm-12 text-right mrg-top-15">
<div class="action-btns text-right flex">
<span class="icon-pending"></span>
<vh-button [type]="'trash'" (onClick)="navigateToHRA()" class="mrg-lft-10" id="icd-delete"></vh-button>
</div>
<button (onClick)="navigateToHRA()" class="btn btn-primary">{{'LookUpButtonText'|translate}}</button>
</div>
You need to use (click) when using Angular's click event.
<button (click)="navigateToHRA()" class="btn btn-primary">{{'LookUpButtonText'|translate}}</button>
The other (onClick) event is most probably the output event emitter of vh-button component/directive.
You have to use (click) on the button instead of (onClick) because that event does not exist on the native button.
Fiddle: http://jsfiddle.net/0o1mrapd/20/
Angular stackblitz link: https://stackblitz.com/edit/angular-fhtaki?file=src%2Fapp%2Fapp.component.html
I have a complex case which i need some enlightenment. (For angular developers, you can think the wrapper div as a host selector, <my-button></my-button>)
As you can see in the fiddle I have a disabled button with a wrapper div which has a click event.
<div onclick="alert('hey')" style="display:inline-block">
<button disabled>
<span>Click</span>
</button>
</div>
What I expect is that when I click on that area, nothing will happen but alas I get the alert. If I remove the span element and put plain text inside the button, this works.
<div onclick="alert('hey')" style="display:inline-block">
<button disabled>
Click
</button>
</div>
How can I make the div unclickable in this case? I found out that pointer-events: none does the trick but then I lose the curser-event which I need for accessibility
I stumbled upon this issue while creating a custom button component with an ng-content in Angular but then realized this is bigger than the framework.
Some links i checked:
Can you prevent an Angular component's host click from firing?
Add CSS cursor property when using "pointer-events: none"
How to stop event propagation with inline onclick attribute?
https://github.com/angular/angular/issues/9587
Maybe this example will be useful
function clickHandler() {
console.log('Click');
}
<div onclick="return false;">
<button onclick="clickHandler()">
Click
</button>
</div>
You can use this css property to avoid click event be fired in the span tag. It could be a workaround.
<div onclick="alert('hey')" style="display:inline-block">
<button disabled>
<span style="pointer-events:none;">Click</span>
</button>
</div>
I have a div with a button inside of it that minimizes the div. If you click anywhere else inside the div it will load details about the div. However, I don't want to load details if minimizing the div. Here is my code:
<div (click)="showDetails(key)" *ngFor="let key of keys">
<button (click)="minimize(key)">Minimize</button>
<span>The rest of the content is here</span>
</div>
When minimize is triggered, I want to ignore showDetails.
I'm not able to test it right now, but what you could try is
(click)="minimize(key, $event)"
In your component
minimize(key, event) {
event.preventDefault();
event.stopPropagation();
}
Try with either one of them and see how it goes !
what you have to do is to ignore the parent click event by stopping the propagation of the event using stopPropagation()
html code :
<div (click)="showDetails(key)" *ngFor="let key of keys">
<button (click)="minimize(key,$event)">Minimize</button>
<span>The rest of the content is here</span>
</div>
ts code :
minimize(key,event){
event.stopPropagation();
}
use event.stopPropagation()
to prevent the click event from bubbling up the DOM.
What i did here to get around it pretty simple where you do not need create the function/method.
<div (click)="showDetails(key)" *ngFor="let key of keys">
<button (click)="$event.stopPropagation()">Minimize</button>
<span>The rest of the content is here</span>
</div>
Hope this helps!
I use a lot of onclick events on buttons in my HTML pages normally, following this pattern :
<button onclick="myFunction(this)"></button>
Some work, Somedon't, and I can't explain why.
These work :
<div>
<button class="static" onclick="myFunction('add');" style="">zzzzzzzzzzz</button>
<button class="static" onclick="myFunction('res');" style="">zzzzzzzzzzz</button>
<button class="static" onclick="myFunction('set');" style="">zzzzzzzzzzz</button>
</div>
These don't :
<center>
<button onclick="newEdit(this)" class="pop_opt" style="height: 35px;">Edit</button>
<hr/>
<button onclick="newConfirm(this);" class="pop_opt" style="height: 35px;">Delete</button>
<hr/>
<button onclick="defaultPopup(this, '')" class="pop_opt" style="height: 35px;">Cancel</button>
</center>
The only differences I see are :
The first buttons are the first clickable elements (they are only clickable elements on area).
The others buttons are clickable elements over another clickable element (and normally if the buttons are clicked it should deny the parent click event).
Note that it perfectly work in Desktop Browser, but only match issues when we use it in an App (I tested only with Cordova)
Finally I could resolve this by simply changing the HTML event onclick to onmousedown & ontouchend
So I've been looking around for an answer for this but I just couldn't find the answer. So what I have is a ng-repeat of items that are in a particular class="list-items". When I click on each of the item in items, it should execute a function. Within each list I have an remove button which I would like to remove the item when clicked.
So some code for reference:
<div ng-click="executeCallback($index)" class="list-items">
<div class="item-info">
<span>some info here</span>
</div>
<button ng-click="removeItem($index)">X</button>
</div>
So I did right now, in my CSS, i tried using an position absolute on the button and a z-index of like 10000 to show that it is greater than, but when I click the removeItem button, it still calls the executeCallback function. I don't want it to call the executeCallback function.
Is there a way to have the removeItem function be called only when the remove button is clicked and not the parent class?
You can add multiple events in one ng-click.
<div ng-click="executeCallback($index)" class="list-items">
<div class="item-info">
<span>some info here</span>
</div>
<button ng-click="removeItem($index);$event.stopPropagation()">X</button>
Directives like ngClick and ngFocus expose a $event object within the scope of that expression. The object is an instance of a jQuery Event Object when jQuery is present or a similar jqLite object. Source
You can use this, directly in the HTML template, to stop its propagation by calling $event.stopPropagation(). Just add it on the button and you should be fine:
<button ng-click="removeItem($index);$event.stopPropagation()">X</button>