Is there a way to trigger an offclick event after an onclick event?

Question

Is there a way to trigger an offclick event after an onclick event?

I am currently developing a virtual keyboard specifically designed for touchscreen computers. Utilizing angular, html, and css exclusively in this project. I am facing an issue where holding down a key does not properly lift up the mouse click event. How can I ensure that touching a key lifts the mouse click even when being held down?

This problem arises because if two characters are touched within a short timeframe (500ms-1000ms), the click is not always detected.

If you have any valuable insights on enhancing touchscreen usability, please share your thoughts :)

javascript css angularjs touchscreen

Answer 1

Answer №1

Try out this demonstration on a touch device to test it out: http://jsbin.com/nibohe/4/

If you want to achieve a sensitive native app experience for both touch and mouse interactions:

$keybKeyElement.on("touchstart mousedown", function( event ){
    event.preventDefault();
    // Record the keystroke
    // Input the character into the textarea
    // Other actions
});

When using only the click event on a touchscreen, there is a need to

Wait around 300+ ms for the finger to lift off
Experience about 400ms delay for the browser to process it as a valid click event.

In comparison, using touchstart followed by event.preventDefault will override the default behavior of the click, mousedown, or other events typically utilized on desktop (non-touch) devices.

Answer 2

Try out this demonstration on a touch device to test it out: http://jsbin.com/nibohe/4/

If you want to achieve a sensitive native app experience for both touch and mouse interactions:

$keybKeyElement.on("touchstart mousedown", function( event ){
    event.preventDefault();
    // Record the keystroke
    // Input the character into the textarea
    // Other actions
});

When using only the click event on a touchscreen, there is a need to

Wait around 300+ ms for the finger to lift off
Experience about 400ms delay for the browser to process it as a valid click event.

In comparison, using touchstart followed by event.preventDefault will override the default behavior of the click, mousedown, or other events typically utilized on desktop (non-touch) devices.

Answer 3

Answer №2

One possible solution is to consider using the onmouseup event rather than the onclick event.

Answer 4

One possible solution is to consider using the onmouseup event rather than the onclick event.

Is there a way to trigger an offclick event after an onclick event?

Answer №1

Answer №2

Similar questions

Populate DataTable with HTML content by fetching it through Ajax requests

Having trouble with JWT verification in combination with Redis

Tips for displaying a section of an image similar to the style seen on the website 9gag.com

What is causing the failure of this form validation when checking for empty input values?

Creating a standalone static page in Wordpress showcasing the header, sidebar, and footer of the twenty fourteen template

Angular's ng serve is experiencing issues with mark-compacts near the heap limit, leading to an unsuccessful allocation

Issue: Actions should be in the form of plain objects. However, the given type is 'Promise'. To resolve this, consider incorporating middleware into your React Native store

Creating a Mongoose Queue with a specific size of N

I'm wondering how to adjust the index in a loop so that it starts at 1 instead of the standard 0

How to read a JSON file using Node.js

Ensure your HTML5 videos open in fullscreen mode automatically

"In my AngularJS application, I am facing an issue with the PDF overview links not

When passed as a parameter to a Firebase dynamic link, the access token for Firebase storage is automatically removed

"Enhance Your Sublime 3 Experience with a Jade Syntax Highlighter, Linting, Auto Complete, and

Storing a multi-dimensional array in PHP efficiently

Continue scrolling down until the bottom of the page touches the top

What is the best way to add unique styles to multiple tags with the same class designation?

Updating hidden days in FullCalendar using jQuery

Transferring Information from EventSource Server Sent Event (SSE) to a Different Variable

Utilizing Javascript / jQuery to eliminate specific CSS styles