Portable way to get Rx stream of all mouse clicks - javascript

I wrote React component which listens to few types of js events (click, scroll, keyup). For the first time it seems work's well, but I noticed that on my IPad click events are ignored. I attached my Ipad to Safari remote debugger but haven't found any errors in console.
I think the problem is in the following line.
const windowClickStream = Rx.Observable.fromEvent(window, 'click');
it works in Chrome and Desktop Safary but doesn't work on my Ipad.
My question is:
how to get portable Rx stream of all click events on the web page?

I had a similar problem few months ago and solved this by changing the event listener. The "click" event is at first for desktop applications with a real mouse or touchpad. It takes 300ms until the event is triggered because the browser waits for an additional click to trigger a "dblclick" event. The webkit browser fire an "touchstart" event immediately after you touch the screen.

Related

Detect "long press" on touch devices

I'm using contextmenu event to capture right clicks. On touch devices that event fired via "long press".
The problem I'm experiencing is that the contextmenu event doesn't fire on touch devices until touch is released. I could listen for touchstart/mousedown events and set timeout, but it won't be accurate since each device might have its own delay for long press activation.
So, is there a way accurately detect when long press is activated on touch screen devices? (On some devices there is haptic feedback when long press was activated)
As discussed in the comment section.
On most devices contextmenu fires without releasing the touch, so in most cases it should be fine to use the contextmenu event to get the desired result.
This might be a bug in the DevTools of Chromium, since you tested with that. I recommend to simply use the contextmenu event.
In case the specific device really fires the context menu on touch release, the user expects the same behavior on your website/app, so it should be fine to go this route.

In Safari web inspector, is it possible to stop on all events except specified events?

I have a webapp with an inner-pane inside an outer-window.
The user can zoom-in in the inner-pane via 2-finger pinch, without zooming-in the outer-window.
On Chrome on Android, the app works as expected.
But Safari on iOS device (iPad), zoomimg-in inside the inner pane, actually zooms-in the entire window, which is not the intended behaviour.
I read here that iphone/ipad can trigger unexpected events.
I want to find this event.
I remote-debug the webapp iOS Safari by connecting the iPad to a Macbook and debugging via Safari.
In Safari Web Inspector, Sources tab, Breakpoints section, I added All Events.
When I touch the pane, the code breaks as expected on the ontouchstart event, which is not the offending event.
I can add specific events to break on, by name.
But because I don't know which is the offending events, I want to break on all events except the ontouchstart event.
Is it possible to stop on all events in Safari except specified events?
Thanks
I did not find out if it is possible, to break on all events excluding specific event(s).
I recently found this link which comprehensively explains various breakpoint options in Safari.
The author of the link graciously answered my question:
Currently there is no way to exclude specific events.
In your scenario, is it really necessary to add listeners for all events, or is it a known list of specific events (e.g. all touch and mouse)?
If it's the latter, I'd suggest just adding a global event listener breakpoint for each event other than the one event you want to exclude.
Another option might be to configure an All Events global event listener breakpoint with a condition of something like window.event.type !== "..."
(note that this will only work in Safari Technology Preview 114 or newer).
p.s.
The reason for my question was an upstream offending event listener.
Because the problem was in an event listener that is upstream to the target event, it wouldn't have helped to break on all events excluding specific event(s).
I ended-up solving my original problem by applying addEventListener with passive = false, and using preventDefault() to prevent from triggering the upstream event handlers in the bubbling stage.

preventDefault() for touchstart handler in Firefox not working - Pure Javascript

I would like for a button to react to 'touches' on a touch screen, and 'clicks' on a non-touch screen. In case of a touch screen, I only want the touchstart handler to direct my flow and prevent the system from further handling the click event.
For this, I added two event listeners to my button. One listens for touchstart events. Once a touchstart has been detected, it uses event.preventDefault() to cancel the click event.
The code below on a touchscreen in Chrome, Opera and Android browsers achieves the desired result:
- one alert saying "touch".
However, in Firefox both events are detected, in spite of the preventDefault() in the touchstart handler:
two alerts... first one says "touch", followed by a second alert saying "click".
lginButton.addEventListener('touchstart', function(event) {
event.preventDefault();
alert("touch");
}, false);
lginButton.addEventListener('click', function(event) {
alert("click");
}, false);
Why is this happening and how can I achieve the desired results in all browsers?
I am currently unable to test. But based on your feedback it appears that Firefox is in fact not following the spec on events found here. I was about to find 4-5 bug logs on Mozilla that discussed this very topic, and finally found one that resolved the issue here https://bugzilla.mozilla.org/show_bug.cgi?id=977226. Definitely check to make sure you have the current version of firefox. And if you do it may be worth opening a new bug with mozilla on this. In the meantime you can set up a conditional inside of your touchstart event handler that detects the event type and handles touch and mouse events differently.. And then further adding more conditionals within you click conditional to handle browser and OS version. which is super bad practice, but would keep you going until a patch was implemented.

Javascript/JQuery - Controlling the iOS keypad

Based on my previous post where I attempt to fire off an event before the keypad opens on iOS, I am using the "touchstart" option to fire off an event.
Fire Event before 'focus' kicks in / Fire Event before keyboard appears on iOS
This works great, but when the device is slightly delayed the touchstart doesn't fire quick enough before the blur so the keyboard appears before the code is fired which is a major issue (we are working around the position: fixed;) issue.
My question is this:
Is there any way to control the keypad? Adding a timer or anything (even a code break) on the touchstart doesn't stop the keypad appearing on blur (when the touch is removed).
Thank you!

Alternative Options: onmousemove

An issue in the Chrome browser (https://code.google.com/p/chromium/issues/detail?id=170631) is causing quite a few issues with functionality that I'm building for a website at the moment. In the application if an onmousemove event is triggered simultaneously as a onmousedown event it appends a class that disables accidental link following since the user is dragging DOM elements. However, if an onmousedown event is fired and there is no movement (essentially a single click) it will follow the link.
This works flawlessly on everything except Chrome, since it incorrectly interprets an onmousedown event as an onmousemove event (occurs with both JavaScript & jQuery). I thought about adding a timer to determine how long the user has held the mouse button down to distinguish the difference between click and drag, but this seems like an inefficient and potentially error prone option. Any thoughts on how I could setup a work around until Chrome fixes this bug would be much appreciated.

Categories

Resources