We Keep Coding

How to prevent clicking while scrolling?

I have a slider made on the basis of scroll. The slider was made specifically for the adaptive. But from dekstop I had a problem. When I start to swipe scroll I have links clicked automatically. How can I prevent it?
$('.js_slider-item').on('dragstart', function() {
return false;
});
// slider
$('.js_slider-viewport').each(function() {
var slider = $(this),
sliderClosest = $(this).closest('.js_slider'),
sliderMouse = false,
sliderPos,
sliderX,
scroll,
movePos,
moveX,
moveWalk;
// mousedown
slider.on('mousedown', function(e) {
sliderMouse = true;
sliderPos = slider.offset();
sliderX = e.pageX - sliderPos.left;
scroll = slider.scrollLeft();
});
// mouseleave
slider.on('mouseleave', function(e) {
sliderMouse = false;
});
// mouseup
slider.on('mouseup', function(e) {
sliderMouse = false;
});
// mousemove
slider.on('mousemove', function(e) {
if (!sliderMouse) return;
e.preventDefault();
movePos = slider.offset(),
moveX = e.pageX - sliderPos.left,
moveWalk = (moveX - sliderX) * 2;
slider.scrollLeft(scroll - moveWalk);
});
});
https://jsfiddle.net/xLwDgZODc/52dwu7v9/17/

You can add an event listener to divert all the click event over document or window so that it will not do default behavior on click anywhere in the page (document/window)
code might look like (sample code -sudo code)
// override the click all over the window
$(document).on('click' function () {
// console.log(' click is not allowed while scrolling');
alert('clicked blocked ');
})//
Then once user stopped scrolling, you can remove the click listener
// remove event listener from document
$(document).removeEventListener("click", function () {
// console.log(' click is not allowed while scrolling');
alert('clicked blocked ');
});

Scrolling with mouse drag inside a container

I have a scrollable list. It has the overflow-y property set to scroll and I can scroll with the scroll bar but I would like to be able to use my mouse to drag up and down.
Here is what I have so far
//Allows the user to scroll by dragging the mouse
element.on({
'mousemove': function(e)
{
if (self.get('clicked'))
{
const difference = self.get('clickY') - element.scrollTop();
const scrollY = difference + (e.pageY - element.offset().top);
element.scrollTop(scrollY);
}
},
'mousedown': function (e)
{
const clickY = (e.pageY - element.offset().top) + element.scrollTop();
self.set('clicked', true);
self.set('clickY', clickY);
},
'mouseup': function (e)
{
self.set('clicked', false);
},
'mouseleave': function(e)
{
self.set('clicked', false);
}
});
I have been playing around with it but just cant get it right, because I have to take into consideration the y position of the element, how much its already scrolled, the mouseY etc. Would someone be able to help me out with this please?

disable mousewheel plugin over div

I'm using the mousewheel plugin that's shown here:
https://github.com/jquery/jquery-mousewheel
And it works well for getting the page to scroll horizontally, but I want to temporarily disable that and revert to vertical scrolling when a couple specific divs pop up. I tried this:
jQuery(document).ready(function() {
jQuery('html, div.everthing').mousewheel(function(e, delta) {
this.scrollLeft -= (delta * 1);
e.preventDefault();
});
jQuery(".interests.content .child").mouseover(
function stopHorizScroll(){
var vScroll = [
jQuery(".child.books").attr("class"),
jQuery(".child.quotes").attr("class"),
jQuery(".child.humans").attr("class"),
jQuery(".child.travel").attr("class")
];
var x = "show"
if (vScroll[0].indexOf(x) !== -1) {
jQuery('html, div.everthing').mousewheel(function(e, delta) {
return false;
});
}
});
});

You've already bound the mousewheel event. return false does nothing to the event you previously bound. To do what you're trying to do, you'd need to unbind the original event, then rebind on mouseleave, or stop the propagation. I'm not sure if you can unbind/destroy the mousewheel event, and I'm not sure if e.stopPropagation() would work either.
Perhaps an easier solution would be to set a flag when someone hovers over that div, and prevent the horizontal scroll if the flag is set. For example, something like this might work:
var stopScroll = false;
jQuery('html, div.everthing').mousewheel(function(e, delta) {
if ( stopScroll ) return;
this.scrollLeft -= (delta * 1);
e.preventDefault();
});
jQuery(".interests.content .child").hover(function() {
stopScroll = true;
}, function() {
stopScroll = false;
});

mouseenter bubbling when mousehover multiple times

how to prevent bubbling or "out of control" when user hover(mouseenter) multiple times . When user hover i'm using slideDown and slideUp for mouseleave and delay i set 250. I can only fix this if delay i set to 1 ms. Below is my script :
$("#nav li").mouseenter(function (e) {
e.stopPropagation();
if (!is_opened) {
var left = $(this).position().left;
$(this).children('div').css('left', '-' + left + 'px');
$(this).children('div').slideDown(delay, function () {
// Animation complete.
is_opened = true;
});
}
return false;
});
$("#nav li").mouseleave(function () {
if (is_opened) {
$(this).children('div').slideUp(delay, function () {
// Animation complete.
is_opened = false;
});
} else {
setTimeout(function () {
if (is_opened) {
$('#nav li:first-child').children('div').slideUp(delay, function () {
// Animation complete.
is_opened = false;
});
}
}, 1000);
}
return false;
});
You can check my JsFiddle here
Reproduce a Problem
Hover Catalogue multiple times and stop hover(but point your cursor at Catalogue), you will see the dropdown will hide but actually it should slide down.

I think your issue is caused by the is_opened flag and then the animation being run along side changing the left css property
If you change your mouse enter and leave js to the following
$("#nav li").each(function() {
//cache vars for better performance
var li = $(this);
var left = $(this).position().left;
var divs = li.children('div');
//change div left first so it only changes once
divs.css('left', '-' + left + 'px');
//do mouse enter and leave stuff
li.mouseenter(function (e) {
e.stopPropagation();
divs.stop(true, true).slideDown(delay);
});
li.mouseleave(function () {
divs.stop().slideUp(delay);
return false;
});
});
it should work: Example

jQuery - when clicking on elements too fast animations get buggy

I've been working on this jQuery effect heres the fiddle:
http://jsfiddle.net/abtPH/26/
Everything's pretty good so far, however when I click on the elements too fast it seems to get buggy and get weird behavior. If you take your time and click on the elements it works fine.
I've tried using :animate
stuff to make sure the animation ends before the user can click on the next one. I do not like this approach though because from a end user it seems like the effects are laggy. I want the user to be able to click on the elements fast and have the desired effect.
Here's my jQuery so far:
$('li').on('click', function (e) {
e.preventDefault();
var active = $(this).siblings('.active');
var posTop = ($(this).position()).top;
if (active.length > 0) {
var activeTop = (active.position()).top;
if (activeTop == posTop) {
$(this).find('.outer').fadeIn('medium', function () {
active.toggleClass('active', 400).find('.outer').fadeOut('medium');
});
} else {
$(this).siblings('.active').toggleClass('active', 400).find('.outer').slideToggle();
$(this).find('.outer').slideToggle();
}
} else {
$(this).find('.outer').slideToggle();
}
$(this).toggleClass('active', 400);
});
$('.outer').on('click', function (e) {
return false;
});

Use .finish() complete all the queued animation before beginning a new one
$('li').on('click', function(e){
e.preventDefault();
var active = $(this).siblings('.active');
var posTop = ($(this).position()).top;
if (active.length > 0) {
var activeTop = (active.position()).top;
if (activeTop == posTop) {
$(this).find('.outer').finish().fadeIn('medium', function(){
active.finish().toggleClass('active', 400).find('.outer').finish().fadeOut('medium');
});
} else {
$(this).siblings('.active').finish().toggleClass('active', 400).find('.outer').finish().slideToggle();
$(this).find('.outer').finish().slideToggle();
}
} else {
$(this).find('.outer').finish().slideToggle();
}
$(this).finish().toggleClass('active', 400);
});
$('.outer').on('click', function(e){
return false;
});
Demo: Fiddle