How to implement tap + hold (long press) on Leaflet map? - leaflet

Question

I'm trying to create a tap+hold event to create a new marker location (tap + hold event is only for mobile apps); these event handlers are not working as expected (there is some override taking place)
I tried using map.on('touchstart'...), map.on('mousedown'...), and other variations but event-code only fires after touchend or mouseup completes.
me.mapLibObj.on( 'touchstart', function(e)
{
if ( ! me.mapTapHoldInterval )
{
me.mapTapHoldInterval = setInterval( function() {
me.mapDownIntvCounter += 1
if ( me.mapDownIntvCounter > 20 )
{
me.defaultCoordinatePoint = [ e.latlng.lat,e.latlng.lng ];
me.createMyCoordinateMarker( true );
clearInterval( me.mapTapHoldInterval );
}
}, 100 )
}
} );
me.mapLibObj.on( 'touchend', function(e)
{
if ( me.mapTapHoldInterval )
{
clearInterval( me.mapTapHoldInterval );
}
} );

Answer 1

I would suggest you to look at contextmenu event:
https://leafletjs.com/reference-1.7.1.html#map-interaction-events
map.on('contextmenu', (e) => {
console.log('Lat, Lon:', e.latlng.lat + ',' + e.latlng.lng);
});

Answer 2

Why do you use mapDownIntvCounter?
This should be enough (use timeout because you probably want to fire it only once)
var mapTapHoldTimeout ;
map.on('touchstart', function() {
mapTapHoldTimeout = setTimeout(function(){ alert('Touched for 500ms'), 500);
});
//clear interval on touchend or touchmove (or you can calculate distance on touchmove to keep some tolerance)
map.on('touchend,touchmove', function() {
if ( mapTapHoldTimeout ) {
clearTimeout(mapTapHoldTimeout );
}
});