We Keep Coding

Disable taphold default event, cross device

I'm struggling to disable default taphold browser event. Nothing that I have found on Google provided any help. I have only Android 4.4.4 mobile and Chrome dev tools for testing. I tried CSS fixes, such as webkit-touch-callout and others, but apparently they don't work for Android, also they don't work in Chrome dev tools.
I also tried detecting right click, (e.button==2), it doesn't work.
I came up with a solution, but it solves one problem and creates another. I just want to have a custom action for 'long press' event for selected anchors and I don't want the default pop up to appear (open in a new tab, copy link address, etc.)
This is what I did:
var timer;
var tap;
$("body").on("touchstart", my_selector, function(e) {
e.preventDefault();
timer = setTimeout(function() {
alert('taphold!');
tap=false;
},500);
});
$("body").on("touchend", my_selector, function() {
if(tap) alert('tap');
else tap=true;
clearTimeout(timer);
});
It successfully disables the default taphold event and context menu doesn't appear. However it also disables useful events, such as swipe. The links are in a vertical menu and the menu is higher than the screen, so a user has to scroll it. If he tries to scroll, starting on an anchor, it won't scroll, it will alert 'tap!'
Any ideas how could I disable taphold default or how could I fix this code so it disables only tap events and leave default swipe events enabled?
Edit: Now I thought about setting a timeout, if the pointer is in the same place for lets say 100ms, then prevent default action. However e.preventDefault(); doesn't work inside setTimeout callback.
So now I'm just asking about the simplest example. Can I prevent default actions after certain amount of time has passed (while the touch is still there).
And this is my whole problem in a fiddle. http://jsfiddle.net/56Szw/593/
This is not my code, I got this from http://www.gianlucaguarini.com/blog/detecting-the-tap-event-on-a-mobile-touch-device-using-javascript/
Notice that while swiping the box up and down, scrolling doesn't work.

I got the solution. It was so simple! I had no idea there's an oncontextmenu event. This solves everything:
$("body").on("contextmenu", my_selector, function() { return false; });

For an <img> I had to use event.preventDefault() instead of return false.
document.querySelector('img').addEventListener('contextmenu', (event) => {
event.preventDefault();
}

Prevent context menu and mouse drag on all elements but one

I am trying to prevent right click context menu, and mouse drag on every element on my page except for one called 'IPAddress'.
Using the code below would seem to do the job, but I still cannot select the element 'IPAddress'.
How can this be altered to allow for this behavior?
html.on('selectstart dragstart contextmenu', function (evt) { // prevent right click, and mouse drag
if (html.not('#IPAddress')) {
evt.preventDefault(); return false;
};
});

Try this:
if (!$(evt.target).is('#IPAddress'))
jQuery not is intended for elements-set filtering, and is not the opposite of is.

Detect when mouse actually moves, not just when the page moves

I'm having a pretty big problem trying to create navigation on my page. If the mouse enters an element then it selects it, then if you use arrow keys it will select the elements relative to the selected one. However this is an issue when the arrow keys cause the page to scroll, because (depending on the position of the mouse) it will select the appropriate element then instantly select the item the mouse is now over after the page moved (even if you didn't move the mouse).
Does anyone know how to fix this problem? I tried tinkering with it but none of my solutions seemed to work. Any help is appreciated, thank you.

It sounds like you should bind the "select when mouse enters" event on mousemove and unbind said event on mousestop. mousestop does not exist on its own, so you will have to create it somehow or use a plugin (there are at least a few out there such as https://github.com/richardscarrott/jquery-mousestop-event/ ). I think this would be the simplest solution, but your UI seems a little bizarre (you want the arrow key to scroll the page normally and "select" an element that's possibly larger than the scroll size?)

Not sure I completely understand, but you should be able to use a combination of the mousemove and keypress events:
$("#element").mousemove(function(e){
alert("mouse moved");
});
$("#element").keypress(function(e){
if (e.keyCode == 38 || e.keyCode == 40){ //up & down arrow keys
e.preventDefault();
}
});

Try returning false from the keyboard event handler where you check for arrow keys:
element.onkeypress = function(ev) {
// ...
return false;
}
This will prevent the "default behavior" that the browser has for the event, which is to scroll. This works also for links, for example: if you return false from a click event handler for a link, clicking the link will not automatically follow it.

Can't use jquery's click event handler to detect right click

In trying to detect a right mouse click with jquery, I noticed that the click event handler doesn't seem to be fired off with a right mouse click, while the mousedown or mouseup event handler's do.
For example, after a right click on the test div, the following alerts 'testing!':
$('#test').mousedown(function(e) {
alert('testing');
});
However, the following does not:
$('#test').click(function(e) {
alert('testing!');
});
Does anyone know why?

When you mousedown, the even fired has event.which
Taken from here: How to distinguish between left and right mouse click with jQuery
$('#element').mousedown(function(event) {
switch (event.which) {
case 1:
alert('Left mouse button pressed');
break;
case 2:
alert('Middle mouse button pressed');
break;
case 3:
alert('Right mouse button pressed');
break;
default:
alert('You have a strange mouse');
}
});
So instead of using .click(), use mousedown and check for the cases.

As this article puts it:
There are no click events for right button clicks in any browser.
So you're left with mousedown and mouseup in most browsers.

Not sure which browser(s) you've tested with, but according to MSDN the onclick fires "when the user clicks the left mouse button". I.e., by definition it doesn't occur for right (or middle) clicks. Given that's on MSDN you can expect IE to behave that way regardless of what the other browsers do.
(Onclick also fires for certain non-mouse things, like changing certain form elements with the keyboard, etc.)
I know jQuery tries to normalise behaviour between browsers, but if the browser doesn't fire the event at all...
There is at least one jQuery plugin that I know of that implements right-click: http://abeautifulsite.net/blog/2008/05/jquery-right-click-plugin/ (I haven't used it, but it looks good except that it notes that Opera doesn't support it).

I have also tried the following code to catch right mouse click for certain class of elements
$(".brick").mousedown(function (event) {
if (event.which === 3) {
currentRightClickedTileID = $(this).attr("id");
}
});
This code doesn't always catch the right click.

How to disable page scrolling in FF with arrow keys

I'm building a menu with topics and items. Each topic can be expanded and collapsed by clicking on it. My task is to make it possible to move through menu topics and items with the up and down arrow keys. I've done this already, but the problem is that when the page is bigger than the window, the page is scrolling when pressing the arrow keys. I've tried using:
document.body.style.overflow = "hidden";
to stop the page from scrolling. Thus when I click on 'Topic2' for example I can continue using the arrow keys to go to next topic/item. After that if I click anywhere else on the screen I set the overflow back to auto and the page can be scrolled again.
This works in IE, but not in FF. In FF the scrollbars are being removed and the mousewheel doesn't scroll the page, but the arrow keys still DO. So my question is how to fix that,
or better, how not to scroll the page when the focus is on any menu element? Thus I won't use the overflow property.

You have to bind a keydown event to the document, and if the event keycode matches any of the arrow keys (37 through 40), return false. That way the arrow press won't go any further.
document.onkeydown = function(e) {
var k = e.keyCode;
if(k >= 37 && k <= 40) {
return false;
}
}
You can easily expand on that to work only when your menu is active, but without seeing some of it's code, it's impossible to give you an example.

below code has fixed the problem
$(window).scroll(function () {
window.scrollTo(0,0);
});

The only way I can see is intercepting the keydown event and doing the blurring/focusing yourself.
There seem to be some gotchas with catching those keys, see this question for a number of (JQuery based) examples that look quite promising.