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!
Related
I would like the following method to be run:
setHeroButtonTextOption(heroButtonText) {
this.builderComponentsService.setPageComponentById(this.componentId, 'heroButtonText', heroButtonText);
}
Each time the user loses focus of the following element:
<div class="builder-components hero-button-click button-outer-container text-center text-md-left mt-5">
<div (click)="selectHeroButton($event, componentId + '-button')"
[attr.data-cy]="'hero-button-container'" [class]="setActiveElement('button')"
[ngClass]="setHeroClass('hero-button')" class="builder-components hero-button-click button-container"
id="{{componentId}}-button" style="display:inline-block">
<button [attr.data-cy]="'hero-button'" [ngStyle]="heroButtonStyle"
class="builder-components hero-button-click btn hero-button">
<span (blur)="removeLineBreaks($event); setHeroButtonTextOption($event.target['innerText']);"
(keydown.enter)="setHeroButtonTextOption($event.target['innerText']); $event.preventDefault()"
[attr.contenteditable]="setContentEditable()" [attr.data-cy]="'hero-button-text'"
[innerText]="heroButtonText" class="builder-components hero-button-click">
</span>
</button>
</div>
</div>
Currently, it isn't happening even though I have a blur event on <span>. How can I fix this?
The blur event will be raised from the button, not the span. If you are trying to include the innerText of the span with the event handler, it looks like it is already bound with heroButtonText, which you can pass as a function argument or reference from the component.
<button (blur)="setHeroButtonTextOption(heroButtonText)">
<span>{{ heroButtonText }}</span>
</button>
Edit - The button should be emitting that blur event. If that isn't working you will need to post more code, it could be that removeLineBreaks($event) is throwing an error, preventing the next call from being made.
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>
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>
seems a little trivial but am having a hard time solving it, i have a jquery function to select the class of a tag on click but the problem is that it selects every other tag underneath the tag clicked as well in structural order where as i only want the very first one
for example if i have
<div class="1">
<div class="2">
<div class="3">
<p class="4">Hello World</p>
</div>
</div>
</div>
and i clicked on the (p) tag that says hello world i would get an alert
saying 4 then 3 then 2 then 1
but like i said i only want the first one witch in this case is 4
here is my jquery code
$("*").dblclick(function(){
if(!$(this).hasClass("") && !$(this).hasClass("main")){
alert($(this).attr('class'));
}
});
i know the problem is happening because technically i am clicking all of the tags so it continus to loop trough but i still need a way to break it after the first class is selected or better yet is there a way to select only the topmost object
Just add return to the function like so:
$("*").dblclick(function(){
if(!$(this).hasClass("") && !$(this).hasClass("main")){
alert($(this).attr('class'));
return false;
}
});
I would pass in event to your click function, and after you've finished your logic, use event.stopPropagation(). This prevents the event from bubbling up to parent elements
$("*").dblclick(function(event){
if(!$(this).hasClass("") && !$(this).hasClass("main")){
alert($(this).attr('class'));
}
event.stopPropagation();
});
Run this example and look your console.
$("body > div").dblclick(function(){
console.log($(this).attr('class'));
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="1">
<div class="2">
<div class="3">
<p class="4">Hello World</p>
</div>
</div>
</div>
You should read about event bubbling and event propagation.
Here is function which does what you want:
$("*").dblclick(function(e){
if(!$(this).hasClass("") && !$(this).hasClass("main")){
alert($(this).attr('class'));
e.stopPropagation();
}
});
And here is working example:
https://jsfiddle.net/18sawk57/
Although it's not a good solution to attach event listening to all of the tags on the page. Much better solution is to add for example id or clickable class attribute for elements that should have event listening.
Here is another working example with better approach: https://jsfiddle.net/tr7aqask/
Here is another working example with bubbling disabled using jquery: https://jsfiddle.net/yc0481sm/
I am trying to stop an event that when we click the child event it will not fire the parent event.
Here's my code :
<div class="card">
<div class="item item-divider">Choose 3 favorite player</div>
<ion-item class="item-button-right" ng-repeat="player in dataService.playerlist" item="item" ng-href="#/tab/chat">{{player.name}}
<div class="buttons">
<button class="button button-assertive icon ion-android-favorite" ng-click="addToFavorite(player)"></button>
</div>
</ion-item>
</div>
Here's my real case : http://codepen.io/harked/pen/WvJQWp
What i want to do is : When we click item(player), it will go to 'Player Detail pages', but when we click favorite button, it will only show alert and add player to favorites but not go to 'Player Detail pages'.
I've already add item.stopPropagation(); or event.stopPropagation();
but still didnt work.
Any advice?
It would be greatly appreciated.
The item is not an event, in this case. You also want to use event.preventDefault() as well, I believe. To get the event from the ng-click you need to add the $event to the arguments like the following bit of code (from your example):
<button class="[...]" ng-click="addToFavorite($event, player)"></button>
Then in your handler add the $event and use preventDefault():
$scope.addToFavorite = function ($event, item) {
alert("One Player Added Succesfully!");
User.favorites.unshift(dataService.playerlist.indexOf(item));
$event.preventDefault();
}
Updated codepen
You need to pass the $event object to the ng-click function callback and use the $event.stopPropagation() method to stop the propagation of the click event to the parent.
Here is the HTML code adjustment:
<div class="buttons">
<button class="button button-assertive icon ion-android-favorite" ng-click="addToFavorite(player, $event)"></button>
</div>
Here is the JS code adjustment inside your ChooseTabCtrl controller:
$scope.addToFavorite = function (item, $event) {
alert("One Player Added Succesfully!");
User.favorites.unshift(dataService.playerlist.indexOf(item));
$event.stopPropagation();
}
Regards,