Menu
Vanilla javascript -
document.addEventListener("click", function(){ alert('click fired');});
with angular 2 + -
@HostListener('window: click', ['$event'])
public iosSafariClick(e: any): void {
alert('event fired');
}
None of this method worked on IOS safari on iPad.
Unless I click some button, hyperlink, or any actionable item, Click event is not fired.
My goal is to fire blur event on a 'div element'.
To do so I am trying to check if the any click event fired on HTML body and check if it was on not the 'div element'.
HTML >
<html>
<body>
<div id= 'menu'>123...</div>
</body>
</html>
Angular Component > typescript >
@HostListener('window: click', ['$event'])
public iosSafariClick(e: any): void {
if(e.target.id !== 'menu'){
this.menu = false; // to close menu
}
}
Is there any way using javascript or angular to overcome this hurdle?
879
When using touch based devices, the events issued to the browsers are different. It also gives the developer accurate use cases, to design and develop around.
I would assume that since there is no mouse then there will be no click event.
Taken from MDN: In order to provide quality support for touch-based user interfaces, touch events offer the ability to interpret finger (or stylus) activity on touch screens or trackpads.
Try using:
document.addEventListener('touchstart', () => console.log('touch called'));
You can always opt to using function () {} instead of () => {}
See full details: https://developer.mozilla.org/en/docs/Web/API/Touch_events
179
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
