We Keep Coding

How to avoid a specific element scroll from getting disabled?

On ipad pro I am trying to disable scroll if popup open and enable the scroll back if popup gets close.
I have found a solution which works perfectly but it blocks inner element scroll too.
function preventDefault(e){
e.preventDefault();
}
function disableScroll() {
document.body.addEventListener('touchmove', preventDefault, { passive: false });
}
function enableScroll() {
document.body.removeEventListener('touchmove', preventDefault);
}
Here, I have an element inside popup which is scrollable and has class name window-content. The above solution blocks the scroll for the entire page means it also blocks the scroll for the inner content of popup.
I have tried below code to allow scrolling inside pop but it did not worked.
function disableScroll() {
document.body.addEventListener('touchmove', preventDefault, { passive: false });
document.getElementsByClassName('window')[0].getElementsByClassName('window-content')[0].removeEventListener('touchmove', preventDefault);
}
I want to allow scroll inside popup and it should only disable for body. Thank you.

I have changed the preventDefault function to avoid the particular element.
preventDefault: function(e) {
if($(e.target).closest(".k-window").length == 0) {
e.preventDefault();
}
},
It is fixed now.

How to remove default box outline animation in chrome on touchstart/ hold?

I have this code here:
var t
$('#camera').on("touchstart", function(e) {
event.preventDefault();
t = setTimeout(function(){ $("#filters").addClass("reveal-filters"); }, 1000);
});
$('#camera').on("touchend", function(e) {
clearTimeout(t);
});
I've successfully disabled the context menu but how can I remove this black box that appears in chrome when you touch and hold?
Thanks

I found those articles useful:
Disable scrolling when touch moving certain element
Disable Hold Box on ie11 W8.1 Touch Device
https://msdn.microsoft.com/en-us/library/jj583807(v=vs.85).aspx
Unfortunately, the event "MSHoldVisual" seems only to be supported on Edge/IE, I couldn't find a similar thing for Chrome.

Javascript scrolling without clicking [duplicate]

I have long vertical list of links that user can scroll through, and I need to prevent triggering a click event (touch) on this links if user scrolls.
In current scenario, when user start scrolling by tapping over the link, it also triggers a click on link. Which is obviously bad. So, is there any way to prevent such a behavior?

Working fiddle
We could use a flag in this case to prevent click event just during the scroll and enable it after the scroll stop.
To listen on scroll stop you could use jQuery’s data method that gives us the ability to associate arbitrary data with DOM nodes and using setTimeout() function that will check every 250ms if the user still trigger the scroll, and if not it will change the flag :
var disable_click_flag = false;
$(window).scroll(function() {
disable_click_flag = true;
clearTimeout($.data(this, 'scrollTimer'));
$.data(this, 'scrollTimer', setTimeout(function() {
disable_click_flag = false;
}, 250));
});
$("body").on("click", "a", function(e) {
if( disable_click_flag ){
e.preventDefault();
}
});
Hope this helps.

Is there a close event for the browser contextmenu

I'm catching the contextmenu event using jQuery like this:
$(document.body).on("contextmenu", function(e){
//do stuff here
});
So far, so good. Now I want to execute some code when it closes but I can't seem to find a correct solution for this.
Using something like the following would catch some of the cases, but not nearly all:
$(document.body).on("contextmenu click", function(e){});
It wouldn't be executed when:
the browser loses focus
an option in the contextmenu is chosen
the user clicks anywhere in the browser that's not on the page
note: I'm not using a jQuery context menu, I'm just using it to catch the event.

Following code may help you. jsfiddle
var isIntextMenuOpen ;
$(document).on("contextmenu", function(e){
isIntextMenuOpen = true;
});
function hideContextmenu(e){
if(isIntextMenuOpen ){
console.log("contextmenu closed ");
}
isIntextMenuOpen = false;
}
$(window).blur(hideContextmenu);
$(document).click(hideContextmenu);

I needed to detect when a context menu closes and so I came up with a solution.
Fiddle: https://jsfiddle.net/kexp0nmd/1/
var premenuelem;
var TempContextMenuCloseHandler = function(e) {
console.log('closed!');
//console.log(e);
window.removeEventListener('keyup', TempContextMenuCloseHandler, true);
window.removeEventListener('mousedown', TempContextMenuCloseHandler, true);
window.removeEventListener('focus', TempContextMenuCloseHandler, true);
var focuselem = document.getElementById('tempfocus');
if (focuselem === document.activeElement) premenuelem.focus();
focuselem.style.display = 'none';
};
var TempContextMenuHandler = function(e) {
console.log('open!');
//console.log(e);
premenuelem = document.activeElement;
var focuselem = document.getElementById('tempfocus');
focuselem.style.display = 'block';
focuselem.focus();
window.addEventListener('keyup', TempContextMenuCloseHandler, true);
window.addEventListener('mousedown', TempContextMenuCloseHandler, true);
window.addEventListener('focus', TempContextMenuCloseHandler, true);
};
window.addEventListener('contextmenu', TempContextMenuHandler, true);
html, body { min-height: 100%; }
<textarea></textarea>
<div id="tempfocus" tabIndex="-1" style="left: 0; bottom: 0; height: 50px; width: 100%; background-color: #CCCCCC; display: none; position: fixed; outline: none;"></div>
Tested and verified working as of May 2020 on Edge, Firefox 76, and Chrome 80 for both mouse and keyboard. Mobile/touch support unknown.
The key aspect of this solution is using an element that has a tabIndex on it. By showing and moving focus to that element (focus stealing) before the context menu appears causes Edge and Chrome to send a focus change event when the user later closes the context menu. I made the background of the div gray so it could be seen - in production, make it a transparent background and style it up however you want.
The keyup handler catches the release of the Escape/Enter key for when the keyboard closes the context menu. The mousedown handler catches mousedown events in Firefox only.
As far as I can tell, there is no way to know for certain what option a user selected or even if they did, in fact, select an option. At the very least, it allows for consistent detection of context menu open/close across all major browsers.
The textarea in the example is just there to give something else to play with for focus handling.
While this solution involves temporary focus stealing, it is the cleanest, cross-browser solution until browser vendors and the W3C add an 'exitcontextmenu' event or some such to the DOM.
One minor bug I just ran into: Showing the context menu and switching away to another application closes the context menu but does not fire the closed event right away. However, upon switching back to the web browser, the event fires and the close handler runs. Adding a 'blur' capture to the window might solve that but then I'd have to re-test everything and it might break something (e.g. fire blur on opening the context menu). Not worth fixing for the extremely rare occasion this might happen AND the handler still fires - it's just visibly delayed.

How to detect mouseup on a scrollbar? (or "scrollEnd" event)

Anyone have any idea how to detect a mouseup event on a scrollbar? It works in FF, but not in Chrome or IE9.
I set up a quick demo: http://jsfiddle.net/2EE3P/
The overall idea is that I want to detect a scrollEnd event. There is obviously no such thing so I was going with a combination of mouseUp and timers, but mouseUp isn't firing in most browsers! The div contains a grid of items so when the user stops scrolling I want to adjust the scroll position to the nearest point that makes sense, e.g. the edge of the nearest cell. I don't, however, want to automatically adjust the position if they're in the middle of scrolling.
I'll also happily accept any answer that gives me the equivalent of scrollEnd

found a solution that works without timers but only if you are scrolling the complete window.
switch(event.type){
case 'mousedown':
_btnDown = true;
//THIS IS ONLY CAUSE MOUSEUP ON SCROLLBAR IS BUGGY
$(document).bind('mousemove',function(event){
if(event.pageX < ($(window).width() - 30)){
//mouse is off scrollbar
$(this).unbind(event);
$(this).trigger('mouseup');
}
});
break:
case 'mouseup':
//do whatever
_btnDown = false;
break;
}
pretty dirty .. but works.

Using jquery there is a .scroll event you can use. Maybe use a global variable to keep track of when .scrollTop() (it returns the number of pixels there are above the screen) has stopped changing? Still creates a race condition, but it should work.

Answering my own question so I can close it -- there is no good solution to this, so timers it is...

I was handling the same problem. For me IE9 don't emit mouseup event for scrollbars. So, I checked and on IE9 when you "mouseup" it emits a mousemove event. So what I did was monitor scrolling, and monitor mousemove. When user is scrolling, and a mousemove event happens, then I understand it as a mouseup event. Only do this check for IE9, cheching the proto property availability. The code will also run for Opera, but Opera has the mouseup and then no problem for me when both events happens. Here is the code, I write AngularJS + ZEPTO code, so get the idea and write your own code, don't expect to copy&paste this code directly:
// Global for scrolling timeout
var q;
// Action to do when stop scrolling
var updatePosition = function() {
// Put the code for stop scrolling action here
}
$(document).on('mousemove', function(e) {
console.log('MOUSE MOVE ' + e.pageX + ',' + e.pageY);
if(!('__proto__' in {})) {
// for IE only, because it dont have mouseup
if($scope.scrolling && $scope.mouse_down) {
console.log('FAKE MOUSE UP FOR IE');
// Only simulate the mouseup if mouse is down and scrolling
$scope.scrolling = false;
$scope.mouse_down = false;
// Update Position is the action i do when mouseup, stop scrolling
updatePostition();
}
}
});
$(window).on('scroll', function(){
console.log('SCROLLING');
// Set the scrolling flag to true
if(!$scope.scrolling) {
$scope.scrolling = true;
}
// Stop if for some reason you disabled the scrolling monitor
if(!$scope.monitor_scrolling) return;
// Monitor scroll with a timeout
// Update Position is the action i do when stop scrolling
var speed = 200;
$timeout.cancel(q);
q = $timeout(updatePostition, speed);
});
$(window).on('mousedown', function() {
console.log('MOUSE DOWN');
// Stop monitor scrolling
$scope.monitor_scroll = false;
// Set that user is mouse down
$scope.mouse_down = true;
});
$(window).on('mouseup', function() {
console.log('MOUSE UP');
// Enable scrolling monitor
$scope.monitor_scroll = true;
// Change mouse state
$scope.mouse_down = false;
// Action when stop scrolling
updatePostition();
});
Was fighting with this problem. My system also runs for mobile and I have a large horizontal scrolling, that always when user stop scrolling, it need to find the actual item the used is viewing and centralize this item on screen (updatePosition). Hope this can help you. This is to support IE9+, FF, Chorme and Opera, I'm not worrying with old browsers.
Best Regards

Is very late but.... there are solution with any scroll in any part of your page.... I do it with the next code...
onScroll = function(){
$(window).unbind("mouseup").one('mouseup',function(e) {
alert("scroll up")
});
};
$(window).bind("scroll", onScroll);
body{
height:5000px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>