how can I invoke onfocusout or onblur menthods in Polymer 3? on-click event works perfectly when I click on menu button but the on-blur or on-focusout doesn't work? I want the menu to close when someone click outside menu?
static get properties() {
return {
_openMenu: Boolean
};
}
_toggleMenu(){
this._openMenu= !this._openMenu;
}
_closeMenu(){
this._openMenu= false;
}
My button looks something like this
<button on-click="${this._toggleMenu()}" on-blur="${this._closeMenu()}">
Ok I fixed my problem like this. Just removed the on-click and on-blur event from my button
<button>Click</button>
On connectedCallBack() I add eventListener to window object, so I can find out where the click has happened. If the click is inside the menu then I toggle my _openMenu, if the click is outside Menu then I false _openMenu
connectedCallback() {
super.connectedCallback();
this._boundClickHandler = this._clickHandler.bind(this);
window.addEventListener('click', this._boundClickHandler);
}
disconnectedCallback() {
super.disconnectedCallback();
window.removeEventListener('click', this._boundClickHandler);
}
_clickHandler(event) {
let clickedInsideMenu = false;
event.path.forEach((node) => {
if (!clickedInsideMenu && node === this) {
clickedInsideMenu = true;
}
});
if (clickedInsideMenu) {
this._toggleMenu();
} else {
this._openMenu= false;
}
}
That's because on-blur and on-focusout are not defined yet in Polymer library. You can check the existing support gesture events here.
What you can do is to add events imperatively by selecting the menu then add an event to it.
Related
I'm working on a javascript tool that applies a click eventListener to a span for opening a tooltip. This click only actually does something when some toggle is set to true. If the toggle is set to false, a click does nothing. However, when the toggle is on and the span already is part of a <a>-tag, the span basically has 2 click behaviors. How can I temporarily disable the link click when the toggle is set to true?
Below is what I currently have.
Some <span class="tooltip">text</span>
function createTooltips() {
const spanElements = document.querySelectorAll(".tooltip");
spanElements.forEach((spanElement) => {
spanElement.addEventListener("click", openToolTip);
}
function openToolTip() {
if (toggledOn == true) {
...open the tooltip...
} else {
return
}
}
function setToggle() {
...
}
I found some solution here that remove a click entirely. Also I tried to apply a pointer-events: none; style to the span, but this will disable my own applied click eventListener.
Add an event listener on the anchors that checks the toggle flag. If the tooltip is toggled on, use Event.preventDefault() to prevent that click from following the link.
function createTooltips() {
const spanElements = document.querySelectorAll(".tooltip");
spanElements.forEach((spanElement) => {
spanElement.addEventListener("click", openToolTip);
spanElement.parentElement.addEventListener("click", checkToggle);
}
}
}
function openToolTip() {
if (toggledOn) {
// ...open the tooltip...
}
}
function checkToggle(e) {
if (toggledOn) {
e.preventDefault();
}
}
I have a input box in which i am toggling the text on mouse over and mouse out event but when I click that box i want to remove mouse hover effect,but after clicking it still changes on mouse hover
onMouseOver() {
this.placeHolder= 'text1';
}
onMouseOut() {
this.placeHolder = 'text2';
}
onMouseFocus() {
this.placeHolder ='text3';
}
There are many ways to do this. See here a possible duplicate.
But short version that I prefer:
Work with variable
clicked: boolean = false;
onClick() {
if (!clicked) {
// Do what you wanna do
clicked = true;
}
}
Second with html
// Code behind
clicked: boolean = false;
onClick() {
// Do what you wanna do
clicked = true;
}
// HTML
<button (click)="!clicked ? onClick() : null">CLICK ME</button>
So, yes, other ways are possible like removeEventListener with Angular's renderer2 and so on. But that's not good. Never change the html directly by yourself. Let Angular doing it.
Hi have simple radio buttons of primeng, while changing the choise, I have some logic on the onClick function, checking if the user changed some fields, if he changed I will show message if he sure he want to leave the choice of the radio button, if he will press "cancel" I want to cancel all the event of the onlick function and to undo to his last choise. but the event of the onclick not doing it, I checked all the function of java script. I tried now to add HostListener that if some boolean field(the one that said the user want to undo)it will stopImmediatePropagation. but on runtime the onclick function called and not the HostListener. some ideas what to do?
radio button
<p-radioButton name="treesDetailsType" [(ngModel)]="selectedType" formControlName="selectedType" (onClick)="onChangeType(type,$event)" class="treeDetails" value="{{type.id}}" label="{{type.desc}}" [disabled]="isReadOnly && type.id != data.selectedType"></p-radioButton>
the onclick function
onChangeType(type, event) {
let change = this.checkChanges(type, event);
if (change) {
//HERE I WANT TO CANCEL ALL THE CHANGE AND TO LEAVE THE FUNCTION
this.clickDisallowed = true;
}
else {
switch (type.id)
.....
}
}
the host listner
#HostListener('click', ['$event']) onClick(event) {
if (this.clickDisallowed) {
event.stopImmediatePropagation();
}
console.log(event);
}
Maybe you are using the hostlistener wrongly.
In the angular example it is used inside a directive
https://angular.io/api/core/HostListener
Try this example!
#Directive({selector: 'button[counting]'})
class CountClicks {
numberOfClicks = 0;
#HostListener('click', ['$event.target'])
onClick(btn) {
console.log('button', btn, 'number of clicks:', this.numberOfClicks++);
}
}
#Component({
selector: 'app',
template: '<button counting>Increment</button>',
})
class App {}
I am using innerHTML binding to create dynamic a tag as in below code:
<span *ngIf="msg" [innerHTML]="msg | sanitizeHtml"></span>
In .ts I am trying to add click event using addEventListerner:
ngAfterViewInit() {
this.elements = this.elem.nativeElement.querySelectorAll('.tradebtn');
if (this.elements && this.elements.length > 0) {
this.elements.forEach((f) => {
console.log(f)
f.addEventListener('click', (event) => {
console.log(event)
});
});
}
}
I get elementselements` list to add event listener. Click event listener works sometimes but doesn't work at most of the times.
I am perplexed at this behavior. I also tried to enclose the code setTimeout() but no luck.
You should use #HostListener to handle event.
Add condition event.target.matches('.tradebtn') to check element source.
#HostListener('document:click', ['$event'])
onclick(event) {
if(event.target.matches('.tradebtn')) {
console.log(event)
}
}
I have custom drop-down in my application. I need to handle clicks outside the component for hiding drop-down list. I want to make it dynamically.
HostListener is not the case, because it adds event listeners for all dropdown components on the page. So i decided to add and remove listener dynamically with renderer.listener.
So i have function that fired when user is clicking input element:
onClickInput() {
if (this.isOpened) {
return this.isOpened = false;
}
this.clickOutsideHandler();
}
Where clickOutsideHandler is:
clickOutsideHandler() {
this.clickOutside = this.renderer.listen('document', 'click', (evt) => {
if (!this.el.nativeElement.contains(evt.target) && this.isOpened) {
this.isOpened = false;
this.cdRef.detectChanges();
this.clickOutside();
}
});
}
Is it the best solution to use this.cdRef.detectChanges(), because angular didn't update the view without it when i change this.isOpened = false; in renderer.listener. Is there better way to do this?