How to avoid triggering the div click event when clicking on ion-icon
<div(click)="goNext()">
<ion-icon name="close-circle-outline" size="large" (click)="dissmiss()"></ion-icon>
</div>
On the dissmiss function you have to write your icon code logic. after performing you have to place event.stopPropagation() at the end of dissmiss function to stop event to trigger the parent events.
like this:
function dissmiss(event){
// write code for icon close.
event.stopPropagation();
}
the above code runs the logic that you written for icon close and the stopped immediately at this function and will not go to the parent node click.
<div(click)="goNext()">
<ion-icon name="close-circle-outline" size="large" (click)="dissmiss($event)"></ion-icon>
</div>
And in the JS:
function dissmiss($event){
$event.stopPropagation();
}
Related
I am using quasar framework for my project and I have a problem on qtable component. I made table rows clickable by #row-click event. That's works fine but I have some action buttons cell on my table and when I click any action button, first #row-click event triggered.. I need to give an exception acitons body cell.. How can I do that?
I found the solution for my problem with method below;
<q-table :data="listProjects(this.$route.params.id)" :columns="columns" row-key="id" #row-click="rowClicker" selection="multiple" :selected.sync="selectedItems">
rowClicker (e, row) {
if (e.target.nodeName === 'TD') {
this.$router.push('project/parts/' + row.id)
}
}
All clicks come from TD element except my button's click. If it is triggered by TD element it will route, if not it will not.
You can use .stop on click and it will only trigger the button click event of actions.
<q-btn icon="info" #click.stop="btnclick" dense flat/>
Example : -
<q-table
title="Treats"
:data="data"
:columns="columns"
row-key="name"
#row-click="onRowClick"
>
<template v-slot:body-cell-name="props">
<q-td :props="props">
<div>
<q-badge color="purple" :label="props.value"></q-badge>
<q-btn icon="info" #click.stop="btnclick" dense flat/>
</div>
</q-td>
</template>
</q-table>
codepen - https://codepen.io/Pratik__007/pen/oNjQYBW
Type Below Code WhereEver you Want to Stop the click Action.
<q-btn v-on:click.stop="onClickFunction"/>
This code will cause Click event to stop the parent click function and run it's own Click Function Specified on that Component
This is a circular menu. In the options to open with the touch on the floating button but I get :
ERROR TypeError: Cannot read property 'getElementById' of undefined
when I run my code. Also the menu is already open when I load this page. I want it to be closed and open when it's clicked on.
<a class="floating-btn" (click)="document.getElementById('circularMenu1').classList.toggle('active');">
<a><ion-icon name="menu"></ion-icon></a>
</a>
<menu class="items-wrapper">
<ion-icon name="home"></ion-icon>
<ion-icon name="person"></ion-icon>
<ion-icon name="heart"></ion-icon>
<ion-icon name="help"></ion-icon>
</menu>
</div>
please use this approach
in html
<a class="floating-btn" (click)="toggleMenu()">
<a><ion-icon name="menu"></ion-icon></a>
</a>
<menu [ngClass]="{'active': isOpen}">...</menu >
in ts
isOpen = false; // set it to false initially
toggleMenu(){
isOpen = !isOpen; // toggle it as you want
}
From your code, I'm unable to find the ID which you have mentions in that click event. Btw this is not a good practice to use en angular. As a solution, for the click event, you can call a function in the controller and set a variable based on the condition. Then after you can use NgClass property binging in order to close or open the menu.
Here is the reference for NgClass property.
I have an primeng accordion and the accordion header has a checkbox control . Whenever i check/uncheck checkbox , the accordion tab is getting open/closed automatically
Is there any way to prevent expand/collapse on click on checkbox ? It should expand/collapse on header other than check/uncheck check box ?
This is happening due to Event Bubbling. For this need to stop eventPropagation by calling stopPropagation() of MouseEvent.
Accordion html code sample
<p-accordion>
<p-accordionTab header="Godfather I" [selected]="true">
<p-header>
<span>Godfather I
<input type="checkbox" (click)="onClick($event)">
</span>
</p-header>
Some Text
</p-accordionTab>
</p-accordion>
Corresponding component ts code.
onClick($event: MouseEvent){
$event.stopPropagation();
}
For Reference added stackblitz code sample.
This is how I solved this issue. This is happening because of Event Bubbling. So when you click on child element. Event propagate to its parent and so on. So Just use stop propagation on event. It will prevent the click event on your accordion. Below code for your reference.
Accordian with Check box code I used (onChange) method.
<p-accordionTab>
<p-header>
<div class="ui-g" style="width:250px;margin-bottom:10px">
<div class="ui-g-12"><p-checkbox name="group1" #ck value="New York" label="New York" [(ngModel)]="selectedCities" (onChange)="checkChange($event)" inputId="ny"></p-checkbox></div>
</div>
</p-header>
</p-accordionTab>
component.ts
selectedCities: string[] = [];
//Simply you have to to stop propogation here.
checkChange(e:any){
console.log(e); // true or false.
event.stopPropagation(); // component will have direct access to event here.
}
I want to use button as a selector, i have a toggle function on click event to get the value from the button click, now what i want to do is to show the user that the button is selected. That is i want to toggle class between md-primary and md-warn.
This is my button
<md-button class="md-fab" ng-click="getTime(0);"
value="0" aria-label="midnight" ng-class="{'active':
variable,'disable': !variable}">0</md-button>
This is the controller part
$scope.getTime = function (value) {
$scope.variable = !$scope.variable;
if($scope.variable){
console.log(value);
}
};
update ng-class like below:
<md-button class="md-fab" ng-click="getTime(0);"
value="0" aria-label="midnight" ng-class="{'md-primary':
variable,'md-warn': !variable}">0</md-button>
also make sure to add ngMaterial to your app module dependencies
here is working Plunkr hope it make it more clear for you.
I have a HTML button and i am just curious an wanna know whether its possible to call a codebehind method without using onclick event
<input type="button" value="Sig-In" id="btnlogin"/>
If the button does a post back, page events like Page_Load will be fired without even having a click event handler. Why can't you just use click event handler?
you can use event load in javascript:
<input type="button" value="Sig-In" id="btnlogin"/>
and javascript you use like that:
$(document).ready(function() {
$( "#btnlogin" ).load( "ajax/test.html", function() {
alert( "Load was performed." );
});
});
this is example in http://jsfiddle.net/YBS4r/2/