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)
}
}
Related
This happens to me in Chrome 79.0.
CodePen replicating the issue:
https://codepen.io/puckowski/pen/eYmEbVz
I have a basic input element which looks like:
<input type="checkbox">
In JavaScript, I define an onchange property like so:
let eventObj = {
onchange: function() { console.log('event fired'); }
}
I then set my input element's onchange property like so:
for (let [k, v] of Object.entries(eventObj)) {
vType = typeof v;
if (vType === 'function') {
inputElem[k] = v; // inputElem is the correct element in the document and not undefined
}
}
Effectively, inputElem is defined by:
inputElem = document.getElementById('foo');
The onchange event is bound only once per the method above.
When I click on the checkbox, sometimes the onchange event fires once, sometimes it fires twice.
This doesn't seem to be an event bubbling issue. If I change the bound function to the following:
function(evt) { console.log('event fired'); evt.stopPropagation(); }
The onchange event will still fire twice occasionally.
Any ideas as to what is going on? Is this perhaps a element focus issue?
Here is what worked fine for me:
function(evt) {
console.log('event fired');
evt.stopImmediatePropagation();
}
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.
First, I'm sorry to my deficient english.
.
I want write code if click anywhere except .do-not-click-here, call myFunction().
So I wrote code like below.
document.addEventListener('click', (event) => {
if(event.target.classList.includes('do-not-click-here')) {
myFunction();
}
)
But this code return error "Property 'classList' does not exist on type 'EventTarget'."
.
So I tried debugging through console.log.
.
When I tried console.log(event);
received event.target as a javascript object. (I want it)
.
When I tried console.log(event.target);
received event.target as an element(?). so event.target.classList is not working. (Maybe)
.
How to get event.target.classList?
or is there a better way than I thought for I wanted?
Other answers are good, this is just a more-angular-style alternative. You can create a global click listener in any of your components this way:
#HostListener('document:click', ['$event.target'])
onClick(element: HTMLElement) {
if(element.classList.contains('do-not-click-here')) {
myFunction();
}
}
<button (click)="onClick($event)">click</button>
export class Component{
onClick(event){
if(event.target.classList.contains('do-not-click-here')) {
myFunction();
}
}
}
document.addEventListener('click', (event) => {
if(event.target.classList.contains('do-not-click-here')) {
myFunction();
}
)
use contains instead includes
you can be REALLY angular use a class as a directive selector:
#Directive({
selector: '.do-not-click-here'
})
export class DoNotClickDirective {
#HostListener('click', ['$event'])
onClick(event: MouseEvent) {
console.log('dont click me!', event);
}
}
now everything with that class will run that function when clicked
blitz (check / click hello component for usage): https://stackblitz.com/edit/angular-7-master-zfzrrb?file=src/app/do-not-click.directive.ts
I have the following jQuery code:
$input.on('keyup', keyUpListener);
$input.on('input', inputListener);
// IE <= 8 fallback for input event.
$input[0].onpropertychange = function() {
if (window.event.propertyName === "value") {
inputListener(window.event);
}
};
$input is a jQuery input[type='text'].
Right now keyUpListener and inputListener are both executed when I type into the input or when I copy and paste something (onpropertychange is not fired because it is an IE only event).
But how can I tell JS to not fire inputListener if keyUpListener is executing and vice-versa?
Attach the specific event to the textbox?
$("#input").on('input', function () {
}
For instance the above - this way you can have multiple listeners not executing on the same input
EDIT
You are able to bind the paste function to the textbox also..
$("#input").bind('paste', function() {
var pasted = true;
});
Thus you can then have the below IF statement:
if (pasted) {
$input.on('input', inputListener);
} else {
$input.on('keyup', keyUpListener);
}
I need to bind click event for a anchor tag which is created dynamically.
Example:
$.fn.ccfn = function(){
$(".alreadyavailabledom").click(function(){
$("<a class="dynamicallycreated"></a>");
})
//i am trying like below, but not working
$(".dynamicallycreated").click(function(){
alert("not getting alert why?")
})
}
It is written as a plugin code, i tried with on, live etc. Not working.
you should use event delegation for that
$(document).on("click",".alreadyavailabledom",function(){
//some operation
});
It helps you to attach handlers for the future elements
Use event delegation
$(document).on('click','.dynamicallycreated',function(){
alert("not getting alert why?")
})
or bind the click when creating element
$.fn.ccfn = function () {
$(".alreadyavailabledom").click(function () {
$('<a>', {
html: "anchor",
class: "dynamicallycreated",
click: function () {
alert("clicked anchor");
}
}).appendTo('#myElement');
})
}