click event not working on mobile when opening from safari on iphone
In react class component, when opening the menu I trigger click events listener on the window.
it's working fine anywhere except on Iphone Safari
toggleMenu = async() => {
if (this.state.isOpen) {
this.handleCloseMenu();
} else {
await this.setState({
isOpen: true
});
window.addEventListener('click', this.handleClick);
disableBodyScroll(this.targetElement);
}
};
handleClick = ({
path
}: E) => {
const btnClicked = path.find(node => node === this.hamburgerBtn.current);
if (!btnClicked) {
const menuClicked = path.find(node => node === this.targetElement.current);
if (!menuClicked) {
this.handleCloseMenu();
}
}
};
click is a mouse event. Still there no mouse on a Iphone there're no mouse event. You've to use the touchpad with such:
document.body.addEventListener('touchstart', function(e){
alert(e.changedTouches[0].pageX) // alert pageX coordinate of touch point
}, false);
Related
We have a mobile app exhibiting very odd behavior. On desktops it works fine. But on mobile devices, touch events are not being handled properly.
This is the event setup code:
document.addEventListener('mousemove', e =>
{
this.mouseMoveListener(e);
});
document.addEventListener('mousedown', e =>
{
this.mouseDownListener(e);
});
document.addEventListener('mouseup', e =>
{
this.mouseUpListener(e);
});
document.addEventListener('touchmove', e => firstTouchEventCancel(this.mouseMoveListener(e)), true);
document.addEventListener('touchstart', e => firstTouchEventCancel(this.mouseDownListener(e)), true);
document.addEventListener('touchend', e => firstTouchEventCancel(this.mouseUpListener(e)), true);
the function firstTouchEventCancel is as follows:
export function firstTouchEventCancel(fn, thisObj)
{
if (thisObj)
{
fn = fn.bind(thisObj)
}
return function (e)
{
e.preventDefault()
e.stopPropagation()
return fn(e.changedTouches[0])
}
}
I've logged the e / event variable immediately in both the firstTouchEventCancel method and in the event handler methods. In both cases the event is an empty object.
I need the event to tell me where the user touched and swiped if they are swiping. But I'm getting nothing. There are no other event handlers setup that might be consuming the event. Plus if there were these methods would not be called.
Has anyone run into this?
In all of the event handlers on mobile the events sent to the listeners are empty.
This question already has answers here:
Detect left mouse button press
(5 answers)
Closed 2 years ago.
I have some popups and now they close if i press any mouse button. I need only left mouse to press and close popup
And the 2nd one question. Why esc popup code doesnt work??
const overlayClose = (evt) => {
if (evt.target.classList.contains('popup_active')) {
togglePopup(evt.target);
}
}
editPopup.addEventListener('mousedown', (evt) => {
overlayClose(evt);
});
addPopup.addEventListener('mousedown', (evt) => {
overlayClose(evt);
});
imagePopup.addEventListener('mousedown', (evt) => {
overlayClose(evt);
});
//popup esc code
function togglePopup(popup) {
popup.classList.toggle('popup_active');
if (popup.classList.contains('popup_active')) {
document.addEventListener('keydown', closeEscape);
} else {
document.removeEventListener('keydown', closeEscape);
}
}
const closeEscape = (evt) => {
if (evt.key === "Escape") {
popup.classList.remove('popup_active');
}
}
Here's useful docs about mouse click events
https://www.w3schools.com/jsref/event_button.asp
You can add event listener on 'mousedown' event and check if event.button equals 0.
UPD
You simply need to add if condition in your event handlers
editPopup.addEventListener('mousedown', (evt) => {
if (evt.button === 0) {
overlayClose(evt);
}
});
When button is focused and then become disabled, focus is still on the button.
It makes browser unresponsive for keyboard events.
Problem does not occur on Chrome, because all disabled buttons lose focus automatically. Global listener seems to work but maybe you have better solution.
window.addEventListener('click', ev => {
if (ev.target instanceof HTMLButtonElement && ev.target.disabled) {
ev.target.blur();
}
})
https://codepen.io/magdalena-chmura/pen/abOrERz?editors=1010
I know it is very late and probably you don't need it anymore, but here is working code to fix it on all visible buttons. You only need to call this function at the right moment:
initButtonObservers() {
this.element.nativeElement.querySelectorAll('button').forEach((button) => {
const observer = new MutationObserver((mutations) => {
mutations.forEach((mutation) => {
if (mutation.attributeName === "disabled" && mutation.target instanceof HTMLButtonElement) {
mutation.target.blur();
}
});
});
const config: MutationObserverInit = { attributes: true };
observer.observe(button, config);
});
}
I am building a web app where I detect the headphones button event. I succeeded in capturing headphones button event when they are plugged in. Now I am trying to capture Bluetooth headphones next button event. Any help on this please?
Code for headphone button detection.
document.addEventListener('volumeupbutton', () => {
//Do something here
}, false);
I need something similar to this.
You can use keydown and keyup events for implementing the long press functionality.
// Imprementation of Long Press
const longPressTime = 1500;
let keyDownTimeout;
document.addEventListener('keydown', e => {
if (keyDownTimeout) {
return;
}
keyDownTimeout = setTimeout(() => {
// button was held for 1500ms, consider it a long-press
if (e.code === 'ArrowUp') {
console.log("Action Performed");
// do long-press action
} else {
console.log("Other action performed");
}
}, longPressTime);
});
document.addEventListener('keyup', e => {
clearTimeout(keyDownTimeout);
keyDownTimeout = 0;
});
Press any key
The above methods work for single key long press. Refer to KeyCode for key code.
Demo of above
I don't believe using the built-in volumeupbutton event will allow you to detect how long the click was, to determine if it should be treated as volume-up or skip-track. Instead you should be able to use the keyup/keydown events, combined with the keyCode property to determine if it is the volume button, like this:
const longPressTime = 1500;
let volumeUpButtonTimeout;
const volumeButtonKeyCode = 0; // you'll need to determine the key code
// cross platform way to get the key code
const getKeyCode = e => {
if (e.key !== undefined) {
return e.key;
} else if (e.keyIdentifier !== undefined) {
return e.keyIdentifier;
} else if (e.keyCode !== undefined) {
return e.keyCode;
}
}
document.addEventListener('keydown', e => {
if (getKeyCode(e) == volumeButtonKeyCode) {
volumeUpButtonTimeout = setTimeout(() => {
// button was held for 1500ms, consider it a long-press
// do long-press action
}, longPressTime)
}
});
document.addEventListener('keyup', e => {
if (getKeyCode(e) == volumeButtonKeyCode) {
clearTimeout(volumeUpButtonTimeout);
}
});
You could use this code to determine what keyCode corresponds to the volume up button:
document.addEventListener('keyup', e => {
console.log(e.keyCode);
});
I am trying to find a way to detect middle click event in React JS but so far haven't succeeded in doing so.
In Chrome React's Synthetic Click event does show the button clicked ->
mouseClickEvent.button === 0 // Left
mouseClickEvent.button === 1 // Middle but it does not execute the code at all
mouseClickEvent.button === 2 // Right (There is also onContextMenu with event.preventDefault() )
Please share your views.
If you are using a stateless component:
JS
const mouseDownHandler = ( event ) => {
if( event.button === 1 ) {
// do something on middle mouse button click
}
}
JSX
<div onMouseDown={mouseDownHandler}>Click me</div>
Hope this helps.
You can add a mouseDown event and then detect the middle button click like:
handleMouseDown = (event) => {
if(event.button === 1) {
// do something on middle mouse button click
}
}
You code might look like:
class App extends React.Component {
constructor() {
super();
this.onMouseDown = this.onMouseDown.bind(this);
}
componentDidMount() {
document.addEventListener('mousedown', this.onMouseDown);
}
componentWillUnmount() {
document.removeEventListener('mousedown', this.onMouseDown);
}
onMouseDown(event) {
if (event.button === 1) {
// do something on middle mouse button click
}
}
render() {
// ...
}
}
You can find more information on MouseEvent.button here:
https://developer.mozilla.org/en-US/docs/Web/API/MouseEvent/button
Be careful. Using mousedown won't always get you the behavior you want. A "click" is both a mousedown and a mouseup where the x and y values haven't changed. Ideally, your solution would store the x and y values on a mousedown and when mouseup occurs, you would measure to make sure they're in the same spot.
Even better than mousedown would be pointerdown. This configures compatibility with "touch" and "pen" events as well as "mouse" events. I highly recommend this method if pointer events are compatible with your app's compatible browsers.
The modern way of doing it is through the onAuxClick event:
import Card from 'react-bootstrap/Card';
import React, { Component } from 'react';
export class MyComponent extends Component {
onAuxClick(event) {
if (event.button === 1) {
// Middle mouse button has been clicked! Do what you will with it...
}
}
render() {
return (
<Card onAuxClick={this.onAuxClick.bind(this)}>
</Card>
);
}
You can use React Synthetic event as described below
<div tabIndex={1} onMouseDown={event => { console.log(event)}}>
Click me
</div>
You can keep onClick. In React, you have access to nativeEvent property from where you can read which button was pressed:
const clickHandler = (evt) => {
if (e.nativeEvent.button === 1) {
...
}
}
return (
<a onClick={clickHandler}>test</a>
)