I have 2 button: "disable_scroll" and "enable_scroll" for enabling/disabling mouse scroll.
Disabling scroll works well:
var cancelscroll = function(e) {
e.preventDefault();
};
$("#disable_scroll").on("click", function () {
if ("onmousewheel" in document) { // for browser except FF
document.onmousewheel = cancelscroll;
} else { // for FF
document.addEventListener('DOMMouseScroll', cancelscroll);
}
});
but when I want to enable mouse scroll, I have problems in Firefox. In Firefox, the mouse scroll won't turn on (in other browsers, this code works well). Please can anyone help locate the error?
$("#enable_scroll").on("click", function () {
if ("onmousewheel" in document) { // for brouzers except FF
document.onmousewheel = function(e){};
} else { // for FF
document.addEventListener('DOMMouseScroll', function(e){});
}
});
This works everywhere: https://github.com/brandonaaron/jquery-mousewheel/blob/master/jquery.mousewheel.js
You use it like this:
$('#test3')
.hover(function() { log('#test3: mouseover'); }, function() { log('#test3: mouseout'); })
.mousewheel(function(event, delta, deltaX, deltaY) {
log('#test3: I should not have been logged');
})
.unmousewheel();
Related
Using the latest Chrome, I have notice that event mousemove fires after mousedown or mouseup even if the mouse is left at the same position.
I have this odd behavior attaching an event listener on document.documentElement.
Same script on latest Firefox works fine, issue seems on Chrome only.
Why does this event fire?
Is there any reasonable solution?
http://jsbin.com/cefoteleqo/1/
document.documentElement.addEventListener('mousedown', function(event){
console.log('mousedown', event.pageX, event.pageY);
}.bind(this));
document.documentElement.addEventListener('mouseup', function(event){
console.log('mouseup', event.pageX, event.pageY);
}.bind(this));
document.documentElement.addEventListener('mousemove', function(event){
console.log('mousemove <<<<', event.pageX, event.pageY);
}.bind(this));
Issue appears on Win 8.1:
Chrome Version 42.0.2311.135 m
Chrome Version 44.0.2398.0 canary (64-bit)
I have notice that mousemove fire at the same time or within a really short distance (10 milliseconds) after mousedown pr mouseup are fired.
So a possible work is to use event.timeStamp on mousemove for comparisons.
The following script check if mousemove event fired "to soon" and print the result in console accordingly.
Another possible solution could be checking the position of the mouse when cb for mousemove is executed.
Both solution are just a work around to this Chrome Bug.
Solution based on timeStamp:
http://jsbin.com/jedotomoxu/1/
Solution based on mouse position:
http://jsbin.com/dinororaju/1/
<script>
var timeDownUp = null;
function start() {
document.documentElement.addEventListener('mousedown', function (event) {
timeDownUp = new Date().getTime();
console.log('mousedown', event.pageX, event.pageY, event.timeStamp);
}.bind(this));
document.documentElement.addEventListener('mouseup', function (event) {
timeDownUp = new Date().getTime();
console.log('mouseup', event.pageX, event.pageY, event.timeStamp);
}.bind(this));
document.documentElement.addEventListener('mousemove', function (event) {
var timeMove = new Date().getTime();
timeDownUp += 10;
if (timeMove > timeDownUp) {
console.log('mousemove', event.pageX, event.pageY, event.timeStamp);
if (event.which === 1) {
console.log('mousemove DRAG', event.pageX, event.pageY, event.timeStamp);
}
} else {
timeDownUp = null;
}
}.bind(this));
}
</script>
I came across this issue as well. The above solution was a bit too much for me. I am not sure if my solution works on all browsers but I can confirm it does work in the version of chrome I am currently running: Version 48.0.2564.109 m
svg.element.addEventListener('mousemove', mouseMoved);
svg.element.addEventListener('mousedown', mouseDown);
var mouseDownTriggered = false;
function mouseDown(evt)
{
console.log('mouse down');
mouseDownTriggered = true;
}
function mouseMoved(evt)
{
if (mouseDownTriggered)
{
mouseDownTriggered = false
}
else
{
console.log('mouse moved');
}
}
I noticed the order is always mouse (down -> up -> moved) when you mouse down.
So I just flag the mouse down and have the mouse move absorb the call.
I'm trying to catch whether the mousewheel is triggered and whether it's scrolled up or down without actually scrolling the page (body has an overflow: hidden).
Any idea's how I can achieve this using jQuery or pure javascript?
$(window).scroll(function(){
if( /* scroll up */){ }
else { /* scroll down */ }
});
I rarely promote plugins but this one is just excellent (and relatively small in size) :
https://plugins.jquery.com/mousewheel/
It'll allow to do something like this :
$(window).mousewheel(function(turn, delta) {
if (delta == 1) // going up
else // going down
// all kinds of code
return false;
});
http://codepen.io/anon/pen/YPmjym?editors=001
Update - at this point the mousewheel plugin could be replaced with the wheel event if legacy browsers need not be supported:
$(window).on('wheel', function(e) {
var delta = e.originalEvent.deltaY;
if (delta > 0) // going down
else // going up
return false;
});
This disables the scrolling.
NOTE: Notice it only stops scrolling if you hover over the element.
$('#container').hover(function() {
$(document).bind('mousewheel DOMMouseScroll',function(){
console.log('Scroll!');
stopWheel();
});
}, function() {
$(document).unbind('mousewheel DOMMouseScroll');
});
function stopWheel(e){
if(!e){ /* IE7, IE8, Chrome, Safari */
e = window.event;
}
if(e.preventDefault) { /* Chrome, Safari, Firefox */
e.preventDefault();
}
e.returnValue = false; /* IE7, IE8 */
}
Quoted from amosrivera's answer
EDIT: To check which way it is scrolling.
var lastScrollTop = 0;
$(window).scroll(function(event){
var st = $(this).scrollTop();
if (st > lastScrollTop){
// downscroll code
} else {
// upscroll code
}
lastScrollTop = st;
});
I'm messing around with touch events on a touch slider and I keep getting the following error:
Ignored attempt to cancel a touchmove event with cancelable=false,
for example because scrolling is in progress and cannot be
interrupted.
I'm not sure what is causing this problem, I am new to working with touch events and can't seem to fix this problem.
Here is the code handling the touch event:
Slider.prototype.isSwipe = function(threshold) {
return Math.abs(deltaX) > Math.max(threshold, Math.abs(deltaY));
}
Slider.prototype.touchStart = function(e) {
if (this._isSliding) return false;
touchMoving = true;
deltaX = deltaY = 0;
if (e.originalEvent.touches.length === 1) {
startX = e.originalEvent.touches[0].pageX;
startY = e.originalEvent.touches[0].pageY;
this._$slider.on('touchmove touchcancel', this.touchMove.bind(this)).one('touchend', this.touchEnd.bind(this));
isFlick = true;
window.setTimeout(function() {
isFlick = false;
}, flickTimeout);
}
}
Slider.prototype.touchMove = function(e) {
deltaX = startX - e.originalEvent.touches[0].pageX;
deltaY = startY - e.originalEvent.touches[0].pageY;
if(this.isSwipe(swipeThreshold)) {
e.preventDefault();
e.stopPropagation();
swiping = true;
}
if(swiping) {
this.slide(deltaX / this._sliderWidth, true)
}
}
Slider.prototype.touchEnd = function(e) {
var threshold = isFlick ? swipeThreshold : this._sliderWidth / 2;
if (this.isSwipe(threshold)) {
deltaX < 0 ? this.prev() : this.next();
}
else {
this.slide(0, !deltaX);
}
swiping = false;
this._$slider.off('touchmove', this.touchMove).one(transitionend, $.proxy(function() {
this.slide(0, true);
touchMoving = false;
}, this));
}
You can find the actual slider here at this pen.
If you swipe through fast enough it will throw the error and sometimes get stuck in the middle of a swipe. Still can't wrap my head around why it is not working. Any help/insight would be greatly appreciated. Not sure what I am doing wrong.
The event must be cancelable. Adding an if statement solves this issue.
if (e.cancelable) {
e.preventDefault();
}
In your code you should put it here:
if (this.isSwipe(swipeThreshold) && e.cancelable) {
e.preventDefault();
e.stopPropagation();
swiping = true;
}
I know this is an old post but I had a lot of issues trying to solve this and I finally did so I wanted to share.
My issue was that I was adding an event listener within the ontouchstart and removing it in the ontouchend functions - something like this
function onTouchStart() {
window.addEventListener("touchmove", handleTouchMove, {
passive: false
});
}
function onTouchEnd() {
window.removeEventListener("touchmove", handleTouchMove, {
passive: true
});
}
function handleTouchMove(e) {
e.preventDefault();
}
For some reason adding it removing it like this was causing this issue of the event randomly not being cancelable. So to solve this I kept the listener active and toggled a boolean on whether or not it should prevent the event - something like this:
let stopScrolling = false;
window.addEventListener("touchmove", handleTouchMove, {
passive: false
});
function handleTouchMove(e) {
if (!stopScrolling) {
return;
}
e.preventDefault();
}
function onTouchStart() {
stopScrolling = true;
}
function onTouchEnd() {
stopScrolling = false;
}
I was actually using React so my solution involved setting state, but I've simplified it for a more generic solution. Hopefully this helps someone!
I had this problem and all I had to do is return true from touchend and the warning went away.
Calling preventDefault on touchmove while you're actively scrolling is not working in Chrome. To prevent performance issues, you cannot interrupt a scroll.
Try to call preventDefault() from touchstart and everything should be ok.
Please remove e.preventDefault(), because event.cancelable of touchmove is false.
So you can't call this method.
If it is an image, you can just set 'touch-action' to none in css.
I have 3 buttons with hover states which makes a little tooltip appear to describe the button. They work fine but on touchs screen they do not disappear after the user clicks on the button.
So I've tried a few js scripts for checking if a device is a touch device or not. They almost work but they also when I test on IE11 it also gets detected as a touch device. Chrome & Firefox do not get mistaken as a touch device.
Any sugestions?
Her is what I've tried
/*****************************
TOUCH DEVICES HOVER FIX START
****************************/
// http://stackoverflow.com/a/4819886/1814446
function isTouchDevice() {
return 'ontouchstart' in window // works on most browsers
|| 'onmsgesturechange' in window; // works on ie10
};
// http://www.stucox.com/blog/you-cant-detect-a-touchscreen/#poke-it
var hasTouch;
window.addEventListener('touchstart', function setHasTouch () {
hasTouch = true;
// Remove event listener once fired, otherwise it'll kill scrolling
// performance
window.removeEventListener('touchstart', setHasTouch);
}, false);
// https://github.com/Modernizr/Modernizr/blob/master/feature-detects/touchevents.js
define(['Modernizr', 'prefixes', 'testStyles'], function( Modernizr, prefixes, testStyles ) {
// Chrome (desktop) used to lie about its support on this, but that has since been rectified: http://crbug.com/36415
Modernizr.addTest('touchevents', function() {
var bool;
if(('ontouchstart' in window) || window.DocumentTouch && document instanceof DocumentTouch) {
bool = true;
} else {
var query = ['#media (',prefixes.join('touch-enabled),('),'heartz',')','{#modernizr{top:9px;position:absolute}}'].join('');
testStyles(query, function( node ) {
bool = node.offsetTop === 9;
});
}
return bool;
});
});
if(bool===true) {
console.log('Touch Device'); //your logic for touch device
jQ( "#btn-1, #btn-2, #btn-3" ).click(function() {
jQ("#btn-1 .tooltip").css('opacity', '0');
jQ("#btn-2 .tooltip").css('opacity', '0');
jQ("#btn-3 .tooltip").css('opacity', '0');
});
}
else {
//your logic for non touch device
}
For IE10+ you can utilize "window.navigator.msMaxTouchPoints"
example code
function isIETouch ()
{
return window.navigator.msMaxTouchPoints == undefined ? false : window.navigator.msMaxTouchPoints;
}
I'm using this function that I found in Chrome Resources Files (chrome://resources/js/util.js) and is working well on Google Chrome.
/**
* Disables text selection and dragging.
*/
function disableTextSelectAndDrag() {
// Disable text selection.
document.onselectstart = function(e) {
e.preventDefault();
}
// Disable dragging.
document.ondragstart = function(e) {
e.preventDefault();
}
}
I want to cancel this events in Internet Explorer 8 but this doesn't work on it.
How can I cancel this events in IE8 ?
Try this:
/**
* Disables text selection and dragging on IE8 and below.
*/
function disableTextSelectAndDragIE8() {
// Disable text selection.
document.body.onselectstart = function() {
return false;
}
// Disable dragging.
document.body.ondragstart = function() {
return false;
}
}