I have a scrollTop() button which, onclick, performs scroll to top action. I want to stop that action when a user touch the screen. See, When user wants to read a specific paragraph or view a video, he wants to stop the scroll top action but scrollTop() goes to top of the page and user can't stop it in middle. I used stopPropogation but it didn't work. Is there any function which can stop scroll action when user touch the screen. I think this details are enough for making a proper function.
I use the following code for scrollTop action. https://codepen.io/vkdatta27/pen/WNxGopP
Situation
I am currently embedding a YouTube iframe on my page and am loading it on top of a popup modal. When I press 'ESC', I can close out the popup modal but if the user has their tab-focus on something within the YouTube player, the browser is no longer able to detect if the user is hitting 'ESC' to try and close the popup modal. This is definitely an A11y issue.
Problem to Solve Is there any way to detect if a user hits the 'ESC' key while the focus is trapped within the player? There are event emitters for playerStateChange, quality change, etc but I didn't see anything for keypresses.
Solutions Considered Already but Rejected:
Blocking the user from focusing on the YouTube iframe and creating custom buttons/controls outside of the player to handle controls - this is too cumbersome of a solution that requires styling buttons and controls
Bouncing focus back to window on player state change - moving focus unexpectedly is an a11y problem but also not every case of user focus trap can be covered with the current event emitters built into the YouTube API.
Any help/guidance is greatly appreciated!
I'm making a web app. On Chrome for Android when when I tap, document.onmousedown happens. How do I respond to only clicks and not taps? I want to respond as soon as the mouse button is pressed, not wait until it is released.
I want a solution that does not use jquery or anything.
If they plug in a mouse to their device (even an android) I want the clicks to get detected.
The purpose of this question is to learn how to test JS event listeners for touch events on mobile devices.
While on Chrome, press F12 to toggle Developer Mode.
Then, on the top-left of the developer partial, you will see a small icon saying "Toggle Device Mode" (Ctrl/CMD + Shift + M)
Then, you can switch between devices at the top.
This will mimic touch gestures made by a real device.
If you go into Developer Tools (F12), enter responsive design mode (Ctrl + Shift + M) and select a touch-enabled device, you can change it so it triggers touch events when you interact with the page (rather than mouse events).
I would recommend Hammerjs's touch emulator. It gets you touch events like Chrome, but also multitouch events (pinch in particular). It's easy to install on your page while developing. I'm using it to test stuff written in Fulcro (React). Works perfectly.
Open up the devtools and on the topleft corner there's an icon with a screen behind a phone. Click it to enable phone mode. You will know you are in phone mode because the page will be smaller and a circle will appear where your cursor was. Clicking will simulate a touch event.
First make sure your devtools is simulating touch ( In chrome , enter responsive mode and choose a mobile device). After that, this is how it works:
There are 4 touch events: touchstart, touchmove, touchend,touchcancel. If you want to simulate touchmove (ie click and move while finger is down) then you add an event listener to either the window or an element, and every firing of that event will trigger the callback you assign. The callback will receive the event as a whole , and it's a good idea to start off by console.log()-ging the whole event and seeing what is useful to you inside it.
For example a touchmove event will have an array called touches which will contain objects called touch. If there are 2 fingers down there will be two items in the array, each with a pageX and pageY property which would give you the position of that finger(although one can't simulate more than one finger in devtools - so you'd have to just use the first item([0]).
window.addEventListener("touchmove", (event) => { do something with event);
I describe the following problem for Mouse Events as well as for Touch Events.
I want to do the following. Having a click/tab area which has the following function:
If I press the mouse down /touch start in this area a GWT PopupPanel should be displayed.
While the mouse is still pressed / touch is not released, the PopupPanel should be able to handle Events such as MouseOverEvent / TouchStartEvent.
I could manage to get the PopupPanel to occur. But, since the mouse is still pressed / touch not released there will no events be triggered on the PopupPanel. It does not matter if I use FocusPanel or mgwt TouchPanel inside the PopupPanel. Events will not be triggered if I enter the PopupPanel with the Mouse pressed or Touch pressed.
What the PopupPanel does:
The PopupPanel should serve as a context menu where one can tab, the popup menu occurs, one swipes over the popup menu (without releasing the mouse/finger) and release the mouse or the finger on the menu item one will choose.
Is there a way do enable events inside the PopupPanel when the event starts outside? Can I trigger the mousedown or touch start event when the PopupPanel occurs such that I can use events when I started the click/touch outside of the PopupPanel?
The following image shows this case:
Edit:
By the way I use the PopupPresenter from GWT-Platform. This adds a PopupPanel to the end of the page before
I tried the following. I put the PopupPanel of my page before the touch event starts right after page creation. The structure is like this.
<body>
< div />
< div />
<gwt-PopupPanel />
</body>
Then I hided popup and showed it on touch start. Again there are no events triggered since the mouse was pressed / finger is still on the display when the popup becomes visible.
Edit: Here is a sample project for this case: https://github.com/confile/popup-test