1. Forum
  2. USENET
  3. alt.html

  • Implementing double click events for use on smartphones

    From Janis Papanagnou@janis_papanagnou+ng@hotmail.com to alt.html on Wed Jul 17 22:08:56 2024
    From Newsgroup: alt.html

    I have a HTML/JS application written for a regular computer. It
    supports mouse-clicks on specific HTML fields to trigger some action
    (like <body onclick="some_funct()"> ).

    When trying to use that application through a smartphone I invoke
    all functions the usual way by taps on the screen (where on the
    computer I use a mouse-click event triggered through the mouse).

    Now I need another function triggered and I wanted to distinguish
    it by using a double-click event. - But that doesn't seem to work
    I used <body ondblclick="another_funct()"> .)

    A double-click just toggles display, making the application appear
    larger or smaller on the screen. - I don't know where that effect
    stems from, but certainly not from my event-handler. Actually that
    effect was there already before I added the double-click handler
    so it must be some default behavior of the smartphone's browser?

    Is there a way to make double-clicks possible on smartphones?
    (How would that look like?)

    And another question; pointing on the smartphone display without
    removing the finger from a GUI element does some differing actions
    in various applications. - What event-handler is triggered for that finger-gesture? (Maybe I could use that handler instead of the
    double-click.)

    Janis
    --- Synchronet 3.21d-Linux NewsLink 1.2
  • From Jukka K. Korpela@jukkakk@gmail.com to alt.html on Thu Jul 18 14:03:10 2024
    From Newsgroup: alt.html

    Janis Papanagnou wrote:

    Is there a way to make double-clicks possible on smartphones?

    I asked ChatGPT this question verbatim, though I appended for clarity
    rCL(in HTMLrCY). It/he/she answered: rCLYes, it is possible to simulate double-click functionality on smartphones using HTML, CSS, and
    JavaScript. Since smartphones primarily use touch events rather than
    mouse events, you need to handle touch events to simulate the behavior
    of a double-click.rCY This was followed by some code that looks promising,
    but I did not test it. I include a copy of its/his/her answer, but I
    suggest you get the original answer, which has nice rCLcopy this coderCY buttons.

    HTML:
    Create a basic HTML structure with an element that you want to make double-clickable.

    html

    <!DOCTYPE html>
    <html lang="en">
    <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Double Click on Smartphones</title>
    <style>
    #doubleClickTarget {
    width: 200px;
    height: 200px;
    background-color: lightblue;
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 50px auto;
    text-align: center;
    font-size: 18px;
    }
    </style>
    </head>
    <body>
    <div id="doubleClickTarget">Double Tap Me</div>

    <script src="double-click.js"></script>
    </body>
    </html>
    JavaScript:
    Implement the JavaScript logic to detect double taps. Save this as double-click.js or embed it directly in the HTML file.

    javascript

    document.addEventListener('DOMContentLoaded', () => {
    const target = document.getElementById('doubleClickTarget');
    let lastTap = 0;

    target.addEventListener('touchend', (event) => {
    const currentTime = new Date().getTime();
    const tapLength = currentTime - lastTap;
    const doubleTapDelay = 300; // Time interval in milliseconds

    if (tapLength < doubleTapDelay && tapLength > 0) {
    // Double tap detected
    target.style.backgroundColor = target.style.backgroundColor
    === 'lightblue' ? 'lightgreen' : 'lightblue';
    alert('Double tap detected!');
    }

    lastTap = currentTime;
    });
    });
    Explanation:
    HTML:
    A div element with an id of doubleClickTarget is created to detect
    double taps.
    JavaScript:
    The script waits for the DOM to fully load before running.
    A touchend event listener is added to the target element.
    When a touch ends, the current time is captured.
    The time difference between the current tap and the last tap is calculated.
    If the time difference is less than a specified threshold (300
    milliseconds in this example), a double tap is detected.
    When a double tap is detected, an action is performed (in this case,
    changing the background color and showing an alert).
    This setup should work across most smartphones and tablets, simulating
    the double-click behavior effectively using touch events.







    --- Synchronet 3.21d-Linux NewsLink 1.2
  • From Janis Papanagnou@janis_papanagnou+ng@hotmail.com to alt.html on Sat Jul 20 13:49:11 2024
    From Newsgroup: alt.html

    On 18.07.2024 13:03, Jukka K. Korpela wrote:
    Janis Papanagnou wrote:

    Is there a way to make double-clicks possible on smartphones?

    I asked ChatGPT this question verbatim, though I appended for clarity
    rCL(in HTMLrCY).

    It seems we don't need Usenet newsgroups' expertise any more if the
    bots take over the part of the reliable(?) source of information. :-)

    It/he/she answered: rCLYes, it is possible to simulate
    double-click functionality on smartphones using HTML, CSS, and
    JavaScript. Since smartphones primarily use touch events rather than
    mouse events, you need to handle touch events to simulate the behavior
    of a double-click.rCY This was followed by some code that looks promising, but I did not test it. I include a copy of its/his/her answer, but I
    suggest you get the original answer, which has nice rCLcopy this coderCY buttons.

    Thanks for the information, much appreciated! (Myself I abstain from
    using bots at least as long as you need to log-in to the service; if
    that changes some day I'll see. They say that response quality still
    varies.)

    [snip code]

    Thanks also for providing the code. I'll inspect it and try to apply
    it to my case.

    Explanation:
    HTML:
    A div element with an id of doubleClickTarget is created to detect
    double taps.
    JavaScript:
    The script waits for the DOM to fully load before running.
    A touchend event listener is added to the target element.
    When a touch ends, the current time is captured.
    The time difference between the current tap and the last tap is calculated. If the time difference is less than a specified threshold (300
    milliseconds in this example), a double tap is detected.
    When a double tap is detected, an action is performed (in this case,
    changing the background color and showing an alert).
    This setup should work across most smartphones and tablets, simulating
    the double-click behavior effectively using touch events.

    Janis

    --- Synchronet 3.21d-Linux NewsLink 1.2