I am trying to get a time-sheet demo app I downloaded to work so right-click events work on mobile touchscreens (with a long-touch). The app is a jQuery table (I have modified so it can edit and save time-sheets), where a value of 1 or 0 sets the background color according to that set in css. You can click or right-click a column header (to fill the whole column with the color) or an individual cell to change its color. It all works flawlessly except for the right-click in a mobile browser. All works on desktop browsers but as the app will only be used in mobile browsers this is not much use. Originally nothing happened on a touch screen when long-touching (nothing visible) but then I disabled the right-click code to hide the context menu and now the screen flickers momentarily after pressing down on a cell for about 500ms. So it tries to do something? But I really want to disable this again.
I really don't know where to begin on this. All example code I see seems to be for starting off new, not editing existing code (which looks nothing like I see in any examples). I would really like this to eventually work so a left-click chooses one color and the next left-click chooses the other color. But for now a touch screen working right-click/long-touch event would be fantastic.
This is the code (I believe) that interprets the clicks and sets the variable to 1 or 0:
if(key[0]===1){ targetState = 1;} //Left mouse button to set the selected area to 1
else if(key[0]===3){ targetState = 0;} //Right mouse button to set the selected area to 0
It comes from this bigger block of code (I can post more if it helps):
var afterSelecting = function(ev,targetArea){
var curDom = $(ev.currentTarget);
var key = $(ev.which);
var targetState = undefined;
if(key[0]===1){ targetState = 1;} //Left mouse button to set the selected area to 1
else if(key[0]===3){ targetState = 0;} //Right mouse button to set the selected area to 0
if(isSelecting && curDom.hasClass("TimeSheet-cell") || isColSelecting && curDom.hasClass("TimeSheet-colHead")){
sheetModel.set(targetState,{
startCell : targetArea.topLeft,
endCell : targetArea.bottomRight
});
removeSelecting();
repaintSheet();
if(sheetOption.end){
sheetOption.end(ev,targetArea);
}
}else{
removeSelecting();
}
isSelecting = false;
isColSelecting = false;
operationArea = {
startCell : undefined,
endCell : undefined
}
};
Or a test/demo of the app here where the files can be viewed (tested in chrome, firefox and edge as working) and cookies need to be enabled to set the date of the time-sheet from the calendar.:
(Auth demo:demo99) http://flakie.epizy.com
For the demo to work you have to select a Sunday from the calendar and then the following Saturday.
I can't see your demo, however, I believe you're looking for Hammer.js and more specifically the Press Recognizer. You should be able to modify the current click handler to use Hammer events. I hope that points you in the right direction.