john-doherty / long-press-event Goto Github PK

according to README, an application wide data-long-press-delay could be set by

"<"html data-long-press-delay="1500"">"

however, getNearestAttribute never gets to document.documentElement:

while (el && el !== document.documentElement)

First of all, thank you for the amazing plugin! It works great except for one detail: I tested it recently on Lenovo Yoga 370 which has touchscreen and long-press events aren't fired on that device.

The reason is that this kind of devices produce Pointer events instead of click/touch events.

My current approach is:

document.addEventListener(mouseUp, clearLongPressTimer, true);
+ document.addEventListener('pointerup', clearLongPressTimer, true);
document.addEventListener(mouseMove, mouseMoveHandler, true);
+ document.addEventListener('pointermove', mouseMoveHandler, true);
document.addEventListener('wheel', clearLongPressTimer, true);
document.addEventListener('scroll', clearLongPressTimer, true);

// hook events that can trigger a long press event
document.addEventListener(mouseDown, mouseDownHandler, true); // <- start
+ document.addEventListener('pointerdown', mouseDownHandler, true);

Let me know @john-doherty if this diff looks good to you, if so I can create a PR.

It would be awesome if one could determine which button is being held down in the long-press event handler.

in order to add eventListener to dynamically appended objects,
I tried a code below(using jQuery).

$(document).on('long-press', '.myClass', function(){
alert('long-pressed!');
//blabla...
});

but it does not work.

how can i deal with this problem?

I Just tried such a thing below. but this worked(on click).
$(document).on('click', '.myClass', function(){
alert('long-pressed!');
//blabla...
});

Added the code exactly the same as in the steps provided. However, whenever I long press it triggers the execution twice?

Here is my code:

document.addEventListener('long-press', function (e) { console.log(e.target); if (e.target.matches('.class')) { e.preventDefault(); console.log(e.target); } });

Hi,

Thanks for this code.
However, IMHO, when mouse pressed and moved a lot, it should not be considered and 'long-press', but as considered as 'drag'.

I am trying to implement your code on my mobile solution, http://plnkr.co/edit/B3xgDpGdafD4AoI3KFyo?p=preview, but it seems not suitable when it goes with your long-press.

I also would appreciate your feedback.

Hello, I was not able to query properties such as event.clientX, etc. However, event.detail.clientX worked. Without really knowing what I was doing, I did a search and replace CustomEvent to MouseEvent and code now works for me... I thought I'd let you know.

I got error : VM2193:1 [Intervention] Ignored attempt to cancel a touchend event with cancelable=false, for example because scrolling is in progress and cannot be interrupted.

I tried (line 164)
e.preventDefault(); by

if (e.cancelable) {
        e.preventDefault();
}

but it wasn't working anymore after.

I only got this error a few times, on 1 specific webpage (https://en.m.wikipedia.org/wiki/Los_Angeles).

This issue was reopened and still unresolved.

<script src="/js/long-press-event.min.js"></script>
<script>
    document.addEventListener('long-press', function(e) {

        // stop the event from bubbling up
        e.preventDefault()

        console.log(e.target);
    });
</script>
<div data-long-press-delay='500' click="openNote()">Note</div>

if I long press above div n times and click on it click event does not fire unless I click n+1 times. The click event starts to fire from (n+1)th click.

I tried to add it with the code below:

let  uniqueElement = document.getElementById("uniqueElement");
        uniqueElement .addEventListener("long-press", function (e) {
            e.preventDefault();
            console.log(e.target);
});

The event does not seem to be fired in IE 10.
I am thinking because the "AddEventListener" is not supported in IE 10.
the event works in Chrome and on Firefox.

Tried to see if it would work with:

let event = new Event("long-press")
uniqueElement .dispatchEvent(event);

This just seemed to fire the event when the page loaded, not on long click.

Question:Is there someway to get the event working with edge or IE 10 or 11?

I have an iPhone 13 and tried this library, which works on the Safari browser but not on the Chrome browser.

Hi,

I'm using this library to support a cross platform application. While long press works great with mouse and touch, I was wondering if there was a way to make it also work with keyboard? So for example, long pressing the 'Enter' key when focused on a button would trigger the same event?

If I open a <select> and immediately close it, it doesn't fire.

If I open a <select> and start moving through the options to choose one, it fires

note; there's no long-press involved, it's a quick tap/click

Hello,

I have an app via cordova. Here it is a kind of internal messaging and this page is the list of conversations. If you click on a card, you enter the conversation. So I have a <a href="> in absolute that makes the whole card.
If we make a long click, a checkbox appears with a delete button. It allows the user to choose the conversation he wants to delete.
It works fine on a desktop but on mobile, I still have the contextual menu that appears. Any idea how to set this up?

Here is a link to what I would like to do: https://jsfiddle.net/5vt9mrph/1/

Thx

Thanks for writing the library in advance +1

Explanation of bug:

1. When I drag the scroll bar of an element, where the long click event is binded to it does not fire the cancel event and registers as a "long-click" event, and fires the function attached.
2. When the mouse is clicked, and moved at the same time it fires the event, instead of cancelling it.

I am guessing this is because its the same element, or scrolling is counted as a different event as a mouse move event?

I was thinking about something like below, but its not yet the solution,and i'm feeling like i'm on the right track, but not there yet.

// clear if the mouse scrolls
document.addEventListener("scroll", function(e) {
    clearTimeout(timer);
});

I can see you're handling touchend event but no touchcancel event.
They seem to be different things:
https://alxgbsn.co.uk/2011/12/23/different-ways-to-trigger-touchcancel-in-mobile-browsers/
I was just looking at your code while implementing my own stuff.

Sample code

<div data-long-press-delay="500">
  <div>
     Sample text
  </div>
</div>

When you have a child inside the element you want to long press, the attribute of data-long-press-delay will not override the default value, it will remains the default value for some reason.

My way of solution is to change the default value in js file:

1. Open the long-press-event.min.js
2. Search for 1500 in the file
3. Replace with the value you want, eg 500 for 0.5 secs

Hope this has a more solid fixed,
Anyway, Thx for the plugin and Cheers

https://jsfiddle.net/e4ya10L7/2/

If there is a click event on the same elements, the event bubbling is not stopped by the e.preventDefault() added in the long press event handler.

Is there a chance for you to publish this on npm? There is a package with the same name on https://npmjs.com, and I needed a bit to realize that's a complete another project then yours.

Prevent default is not working in this simple scenario:

                var el = document.querySelectorAll('.product-item__img');
		el.forEach(function(item){
			item.addEventListener('long-press', function(e) {
			    e.preventDefault()
			    console.log(e.target);
			});
		})	

To reproduce:

1. Open in chrome: https://jsfiddle.net/5xrtx69z/3/
2. Right click on a tile and leave the context menu open

I import using import('long-press-event').

The library seems to work perfectly.

However the typescript compiler or Vite seems to produce this error:

long-press-event doesn't appear to be written in CJS, but also doesn't appear to be a valid ES module (i.e. it doesn't have "type": "module" or an .mjs extension for the entry point). Please contact the package author to fix.

At present on mobile, if you hold down your finger but accidentally move slightly (3px) it does clears the long-press timer. It should allow a little wiggle room so it feels more natural.

i compared firefox (linux) and samsung internet, preventDefault does not do the same thing. I use a workaround:

ne.addEventListener('long-press', function(e){
   if(!this.havePointer)
     return;
   //e.preventDefault(); // works in firefox/linux: (pending) click is not fired,
                         // but not in samsung internet: new clicks (handlers are accumulated!) are suppressed.
   // workaround:
   function suppressEvent(e){
     document.removeEventListener('click', suppressEvent, true);
     e.stopImmediatePropagation();
     e.preventDefault();
     e.stopPropagation();
   }
   document.addEventListener('click', suppressEvent, true);
   document.addEventListener('pointerdown', function removeSuppressor(e){
                document.removeEventListener('pointerdown', removeSuppressor, true);
                document.removeEventListener('click', suppressEvent, true);
            }, true);

   // actual handler...
 });

ne.addEventListener('pointerleave', function(e){
   this.havePointer=false;
 });

 ne.addEventListener('pointerenter', function(e){
   this.havePointer=true;
 });

My first reflex when seeing data-long-press-delay is to think it should be long-press-delay.

But I assume there is a good reason for the data- prefix that I just don't know about, so:

Is this documented somewhere, either in this project or if it's a wider standard/recommendation/best-practice on something reputably established like MDN?

<script src="/js/long-press-event.min.js"></script>
<script>
    document.addEventListener('long-press', function(e) {

        // stop the event from bubbling up
        e.preventDefault()

        console.log(e.target);
    });
</script>
<div data-long-press-delay='500' click="openNote()">Note</div>

if I long press above div n times and click on it click event does not fire unless I click n+1 times. The click event starts to fire from (n+1)th click.

The demo fiddle works in 14 but not 13.

This is because both support pointer events, but 13 doesn't fire pointerdown until the same time it fires pointerup - when you release your finger.

I'm not actually using this library, I ran into the issue in my own code and wondered if this might have the same problem.

I need to have both a click and a long-press event listener on objects, similar to gallery apps that allow for clicking to become fullscreen and long-press to become multi-select/delete actions

I can't find how to prevent the Click from firing after the long-press event is fired.

HTML

<div class="form-group grid" data-src="portfolio-preview">
    <div class="grid-col grid-col--1">
        <div class="grid-item bd bdrs-4 bdw-1 bdc-grey-400">
            <img class="portfolio-img lightbox-img" src="https://glamsquad.sgp1.cdn.digitaloceanspaces.com/GlamSquad/artist/1/portfolio/2019-05-16-06-07-370bc89b7bfe9769740c1f68f7e103340a94aaaeaa5d6f139f841e3c022ad309de.png">
        </div>
        <div class="grid-item bd bdrs-4 bdw-1 bdc-grey-400">
            <img class="portfolio-img lightbox-img" src="https://glamsquad.sgp1.cdn.digitaloceanspaces.com/GlamSquad/artist/1/portfolio/2019-05-16-06-07-38d8d03cc6edef043d25e9099b883cd235c823a267ab03b9e740934f06c4f87e2f.png">
        </div>
    </div>
    <div class="grid-col grid-col--2"></div>
    <div class="grid-col grid-col--3"></div>
    <div class="grid-col grid-col--4">
        <div class="grid-item bd bdrs-4 bdw-1 bdc-grey-400">
            <img class="portfolio-img lightbox-img" src="https://glamsquad.sgp1.cdn.digitaloceanspaces.com/GlamSquad/artist/1/portfolio/2019-05-16-06-07-38a579477aab1dcd3069765ff0aeb07c67e47731fb05ed9a55245de71deb1bc075.png">
        </div>
        <div class="grid-item bd bdrs-4 bdw-1 bdc-grey-400">
            <img class="portfolio-img lightbox-img" src="https://glamsquad.sgp1.cdn.digitaloceanspaces.com/GlamSquad/artist/1/portfolio/2019-05-16-06-07-3815b29faf8c6929ecb12c9122db6b2ee4095d220ea64a7695df7752361d96e832.png">
        </div> 
   </div>
</div>

Current JS

$(document).on('long-press', '.portfolio-img', (e) => {
    e.preventDefault();
    e.stopPropagation();
    console.log('Portfolio long press event.');
 });
$(document).on('click', '.lightbox-img', imageClick);

in this line:

you check for navigator.MaxTouchPoints.
but according to mdn the property is actually maxTouchPoints (js is case sensative).