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,
Related
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!
For example i have such code:
<div class="panel" ui-sref="product.details({id: someId})">
<div class="panel-sub-link">
some another event is here
</div>
</div>
jsfiddle
is it possible somehow not to call parent ui-sref, when i click on sub-link element? this is just an abstractive example... With more details: for example i have a panel and a slider (with navigation arrows), when i click on arrows - i do not need to change my state. How can i do this?
Using ui-sref isn't the only option to navigate between states. We still have $state.go right?
In place of ui-sref, you can simply add ng-click referring to a function in controller performing $state.go("product.details..."). And, in your panel, where you don't want to visit state on-click, you can have $event.stopPropogation.
Something like this:
<div ng-app="myApp" ng-controller="AppController">
<div class="panel" ng-click="navigate(someId)">
<div class="panel-sub-link" ng-click="$event.stopPropagation();">
some another event is here
</div>
</div>
</div>
And, navigate function in controller like this:
$scope.navigate = function(someId) {
console.log("going to product details")
$state.go("product.details", {
id: someId
})
}
That should do it!
working sample example
I'm running into an issue with some Knockout code firing off a CSS3 animation. It works with one block of code, and doesn't on another. The idea is to show an animation when you add an item to the cart. The object in the code not working is coming up empty, where as the one working displays the product notification' div. The other issue is that $('#cart-nav a.first').click(); is not getting dispatched when this action is performed. This is not working in either scenario.
Below is where the code works (for the animation), and another where it does not. Appreciate any help. Thanks
Working code where CSS3 Animation fires off when you add an item to the cart. The class 'rise' triggers the animation. One working block of code, the other not working, and the JS below that. Thank you
Works
<div class="thumbnail product-image medium">
<div class="actions">
<div class="product-notification-cont">
<div class="product-notification"> Added to cart!</div>
</div>
Add to Cart
More Info
</div>
<a href="" data-bind="attr:{href:'/#products/'+$data.id}">
<img src="" data-bind="attr:{alt:$data.name, src:$root.servicePath+'products/'+$data.id+'/images/preview_image/medium?auth='+ax.JRR}" />
</a>
</div>
Doesn't work
<div class="product-info" data-bind="visible:!(productLoading())">
<h2 data-bind="text:product().name"></h2>
<div class="product-description" data-bind="html:product().description">
</div>
<div class="product-notification-cont">
<div class="product-notification"> Added to cart! </div>
</div>
<button class="button" data-bind="click:addProductToCart.bind($data,productMoreInfo())">Add to Cart</button>
<? } else { ?>
<h3><?=l(23)?></h3>
<? } ?>
</div>
JS (console.log in there for debugging purposes)
self.addProductToCart = function(data, event) {
var $productNotification = $(event.target).prev().children('.product-notification');
console.log($productNotification);
ax.Cart.addCartItem({product_id:data.id, name:data.name, description:data.description});
$('#cart-nav a.first').click();
$productNotification.addClass('rise');
$productNotification.on('animationend',function() {
$(this).removeClass('rise');
});
};
The main difference I spot is this:
The working data-bind binds $data as this:
data-bind="click:$root.addProductToCart.bind($data)"
The not-working data-bind binds $data and the first argument of addProductToCart:
data-bind="click:addProductToCart.bind($data,productMoreInfo())"
Knockout's default click handler signature is:
function(data, event) { }
which matches your addProductToCart signature. The second (faulty) data-bind creates these parameters:
productMoreInfo(), $data, clickEvent
I.e.: it adds the additional parameters in bind to the front of the arguments list.
The quick solution would be to create a new event listener that handles the extra parameters. However, I'd strongly suggest changing your approach altogether. You should look in to afterRender, the css binding and custom bindings. Avoid DOM related jQuery code in your view models.
I'm pretty new to Ember but this one seems very strange.
I've got a div on a template looking like so:
<div {{action "selectItem" item target="controllers.items"}}> Hello there! </div>
On my controller I have a simple action callback:
WebComponent.ItemController = Ember.ArrayController.extend(Ember.Evented, {
needs: ["settings"],
actions: {
selectItem: function (item) {
//This here won't fire unless I attach it to a <button> not a <div>
},
refreshList: function () {
//blah
},
...
}
},
...
} ...
In full disclosure, I am working inside Phonegap with the emulator.
Any ideas or even directions where to take this investigation?
I figured out the problem. It seems that Ember does not translates click events to touch events automatically (Ember 1.8) for tags like divs, spans, li, etc. It seems to do so for tags like button. So the solution for this is to add an attribute to map the event to the action. Use the on attribute with your action.
<div {{action "selectItem" item on="touchEnd" target="controllers.items"}}> Hello there! </div>
Some browsers/devices will not work properly with no-standard clickable DOM elements. Consider wrapping your <div /> with a link tag <a> and add the click event to the A element.
<a {{action "selectItem" item target="controllers.items"}}><div></div></a>
Second option (which worked for me for Safari on iPad is to just set the cursor to pointer.
<div style="cursor: pointer"></div>
This answer was on the comment of Vincent Gauthier https://github.com/emberjs/ember.js/pull/11373:
<button {{action 'process'}} {{action 'process' on="touchEnd"}}>Submut</button>
This was very helpful for me because when I try to put only on="touchEnd" it stopped working on desktop browser, so the multiple actions are the key
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