Is there any way to handle tap from track pad of mac?
I need to handle 'tap' and 'click' on track-pad, especially on mac.
I tried
$.event.special.tap = {
setup: function(data, namespaces) {
var $elem = $(this);
$elem.bind('touchstart', $.event.special.tap.handler)
.bind('touchmove', $.event.special.tap.handler)
.bind('touchend', $.event.special.tap.handler);
},
teardown: function(namespaces) {
var $elem = $(this);
$elem.unbind('touchstart', $.event.special.tap.handler)
.unbind('touchmove', $.event.special.tap.handler)
.unbind('touchend', $.event.special.tap.handler);
},
handler: function(event) {
event.preventDefault();
var $elem = $(this);
$elem.data(event.type, 1);
if (event.type === 'touchend' && !$elem.data('touchmove')) {
event.type = 'tap';
$.event.handle.apply(this, arguments);
} else if ($elem.data('touchend')) {
$elem.removeData('touchstart touchmove touchend');
}
}
};
$('.thumb img').bind('tap', function() {
//bind tap event to an img tag with the class thumb
}
Which didn't work.
How to capture tap event on the track-pad?
I'm having this same concern. It appears that the trackpad on the MacBook (for example) doesn't fire TouchEvents like an actual touch device would. It is instead converting gestures into MouseEvents.
document.addEventListener('mousewheel', function(e) {
console.log(e.wheelDelta);
});
document.addEventListener('touchstart', function(e) {
console.log(e);
});
In the above example, when I attempt to capture the "pinch/zoom" gesture on a trackpad, I'm actually getting back Delta from a scroll wheel as if I'd held down CTRL and then scrolled up or down, returning a wheelDelta value of 120 or -120. Putting event listeners on for 'touchstart' doesn't not write to the console as I prescribe unless it's on a touch device like a tablet or smart phone.
Obviously, the MackBook can detect when you've touched the trackpad since it's able to then detect your movement, but it does not appear to be available through the document.
Related
I have problem with my dropdown menu on iPhone. Whenever I have more than 6 links on my menu the list is too long and whenever I want to scroll it little bit down with finger I can't because I press on link and its instantly fire to another url. How I can avoid that and recognize that I want to scroll menu little bit down and how to recognize if I tapped a menu li to go into another url?
$(".content-bar--content").on("click", function() {
window.location.href = link;
});
This is what my code looks like.
Based on https://www.falise.com/blog/prevent-click-event-scrolling-ipad/ without jquery
First we check if the device is iOS or not
var iOS = agent.indexOf('iphone') >= 0 || agent.indexOf('ipad') >= 0;
We also need a variable which will tell us if the screen is being touched and moved.
var touchMoving = false;
Then for iOS only add event listeners that listen for touchmove and touchend that will set touchMoving to the appropriate value.
if (iOS)
{
document.addEventListener("touchmove", function(e)
{
touchMoving = true;
});
document.addEventListener("touchend", function(e)
{
touchMoving = false;
});
}
Now when a link with a class content-bar--content is clicked while scrolling it will prevent the click event because touchMoving is true.
document.querySelectorAll('.content-bar--content').forEach(elem => {
elem.addEventListener('click', function(e) {
if (touchMoving) {
e.preventDefault();
}
}
});
I was asked to implement ctrl+mousewheel event for our page site in order to change image offset on user zoom in or zoom out. I found this old answer Override browsers CTRL+(WHEEL)SCROLL with javascript and I`ve tried to do the same.
I downloaded the jQuery Mouse Wheel Plugin for the implementation and here is my code:
var isCtrl = false;
$(document).on('keydown keyup', function(e) {
if (e.which === 17) {
isCtrl = e.type === 'keydown' ? true : false;
}
}).on('mousewheel', function(e, delta) { // `delta` will be the distance that the page would have scrolled;
// might be useful for increasing the SVG size, might not
if (isCtrl) {
e.preventDefault();
alert('wheel');
}
});
The events works fine separately, but if I hold the CTRL button and wheel the mouse the wheel event does not fire.
Does any one have better solution for this or may be I did something wrong?
Fiddle, In order for it to work you have to click in the result box first before trying.
$(window).bind('mousewheel DOMMouseScroll', function(event)
{
if(event.ctrlKey == true)
{
event.preventDefault();
if(event.originalEvent.detail > 0) {
console.log('Down');
}else {
console.log('Up');
}
}
});
To check if the ctrl key is clicked, the event already provides a way to do that. Try this:
.on('mousewheel', function(e) {
if (e.ctrlKey) {
e.preventDefault();
alert('wheel');
}
});
This also works for e.shiftKey, e.altKey etc. I would only listen for the scroll event and there I would check if the ctrlKey is down.
This can be achieved with the wheel event, which is the standard wheel event interface to use.
document.getElementById('id_of_element')
.addEventListener('wheel', (e) => {
if(e.ctrlKey)
alert("Control + mouse wheel detected!");
})
I have a swipe functionality on my mobile page, and I want to used touchstart, touchend, and touchmove to track the swipe functionality across the device without affecting the scrolling.
Here is my code.
jQuery('.first-frame').bind('touchmove', function(event) {
_gaq.push(['_trackEvent', 'Landing-Page', 'Swipe-Toggle-Color', '0259_2190']);
});
If it's possible to only monitor the swipeleft and swiperight events in jQuery Mobile instead, do so.
Otherwise, you can set a global variable on the scroll event that resets after, say, 0.2 seconds. Then have the touchmove event check if that variable is set, and if it is, don't trigger Google Analytics.
window.is_scrolling = false; // global variable
window.timeout_id = 0;
window.onscroll = function() {
window.is_scrolling = true;
clearTimeout(window.timeout_id);
window.timeout_id = setTimeout(function() {
window.is_scrolling = false;
}, 200); // milliseconds
};
jQuery('.first-frame').bind('touchmove', function(event) {
if (!window.is_scrolling)
_gaq.push(['_trackEvent', 'Landing-Page', 'Swipe-Toggle-Color', '0259_2190']);
});
I know you asked for a touchmove, touchend, and touchstart example but I would use a combination of HammerJS (https://github.com/EightMedia/hammer.js/) and custom Google events to take the guess work out of it.
var element = $(".first-frame")[0];
var trackswipe = Hammer(element, {
drag: false,
transform: false,
swipe: true,
swipeVelocityX: 0 // Adjust to liking...
}).on("swipe", function(event) {
if (event.gesture.direction === "left") {
// Track Something
return false;
} else if (event.gesture.direction === "right") {
// Track something else.
return false;
}
return false;
});
When using event listeners with the touchmove and touchend events, I can't get Chrome for Android to acknowledge those events unless I first use event.preventDefault(); earlier in the code. If I'm not wanting to block the default scroll functionality, is there any other workaround I can use to get Chrome for Android to acknowledge these events?
Sample code:
$(document).ready(function () {
// Bind touch event listeners.
var elem = $('html').get(0);
elem.addEventListener('touchstart', function (e) { console.info('"touchstart" detected. Coordinates - ' + getCoord(e)); });
elem.addEventListener('touchmove', function (e) { console.info('"touchmove" detected. Coordinates - ' + getCoord(e)); });
elem.addEventListener('touchend', function (e) { console.info('"touchend" detected. Coordinates - ' + getCoord(e)); });
function getCoord(e) {
var touch = false;
if (e.touches.length > 0) {
touch = e.touches[0];
} else {
touch = e.changedTouches[0];
}
if (touch) {
return 'x: ' + touch.pageX + ', y: ' + touch.pageY;
}
}
Example fiddle here: http://jsfiddle.net/jQ2VS/1/
Google Chrome will fire a touchcancel event about 200 milliseconds after touchstart if it thinks the user is panning/scrolling and you do not call event.preventDefault().
Assuming that you want to intercept horizontal touch events and let vertical touch events cause panning/scrolling, a workaround would be:
On touchstart, store the coordinates in a variable, and set iteration to 0.
For each touchmove event, set iteration to iteration+1.
When iteration is equal to 4 (just a "magic number" I found to be reliable on my set-up), calculate the total touch offset deltas for x- and y- axes.
EDIT: on mobile devices you'll only receive one touchmove without event.preventDefault()
If x-axis offset > y-axis offset * 3 then fire event.preventDefault(). (This ensures the the gesture is pretty much horizontal)
The down-side for this is that user can only either swipe left/right or scroll up/down.
Finally I found the solution (pure js) even in case you might want use it for swipe:
var swipe = function() {
var touchX, touchY, movX, movY, go;
function prevent(e){
e.preventDefault();
}
function start(e) {
go = false;
document.addEventListener("touchmove", prevent, false);
touchX = e.touches[0].pageX;
touchY = e.touches[0].pageY;
}
function move(e) {
movX = e.touches[0].pageX - touchX;
movY = e.touches[0].pageY - touchY;
if(!go) {
(Math.abs(movY) < Math.abs(movX)) ? go = true : stop(e);
} else {
/* *************** */
// cast your spell
/* *************** */
}
}
function stop(e) {
document.removeEventListener("touchmove", prevent, false);
}
document.addEventListener("touchstart", start, true);
document.addEventListener("touchmove", move, true);
document.addEventListener("touchend", stop, true);
document.addEventListener("touchleave", stop, true);
document.addEventListener("touchcancel", stop, true);
}
Hope this help.
The simplest answer is that you have to preventDefault on the first touchmove event otherwise they will be cancelled.
I found that preventing the touchcancel worked fine.
The accepted answer is not correct.
On Android if preventDefault is not set on touchstart the device assumes native scrolling and no more touch events are sent to webview. If preventDefault is set all native scrolling is disabled.
There is a shim to provide swipe events with native scrolling here : https://github.com/TNT-RoX/android-swipe-shim
I'm trying to write mechanism on site which prevents users to scroll normally. When user scrolls down or up the site is smoothscrolling to next or previous slide (depends on scrolling direction) and stops there (like when you click on a navbar). See live preview: CLICK HERE
But there's an annoying problem. It works almost good in FF (no jumping), but breaks in another browsers (Chrome, Safari, IE)- it jumps. How can I prevent this?Here are snippets from my code.
I have a ScrollControl object where I prevent scrolling:
scrollControl = {
keys : [32, 37, 38, 39, 40],
scrollTimer : 0,
lastScrollFireTime : 0,
preventDefault : function(e){
e = e || window.event;
if (e.preventDefault)
e.preventDefault();
e.returnValue = false;
},
keydown : function(e){
for (var i = scrollControl.keys.length; i--;) {
if (e.keyCode === scrollControl.keys[i]) {
scrollControl.preventDefault(e);
return;
}
}
},
wheel : function(e){
scrollControl.preventDefault(e);
},
disableScroll : function(){
if (window.addEventListener) {
window.addEventListener('DOMMouseScroll', scrollControl.wheel, false);
}
window.onmousewheel = document.onmousewheel = scrollControl.wheel;
document.onkeydown = scrollControl.keydown;
},
enableScroll : function(){
if (window.removeEventListener) {
window.removeEventListener('DOMMouseScroll', scrollControl.wheel, false);
}
window.onmousewheel = document.onmousewheel = document.onkeydown = null;
}
}
Then I'm listening if mousewheel occurs and trying to execute function only once (I'm using this plugin to detect mousewheel PLUGIN )
$(window).mousewheel(function(objEvent, intDelta){
var minScrollTime = 1000;
var now = new Date().getTime();
function processScroll() {
console.log("scrolling");
if(intDelta>0){
$.smoothScroll({
speed:med.effectDuration,
easing:med.scrollEase,
scrollTarget:med.prevPage,
afterScroll: function(){
med.currentPage = med.prevPage;
med.setActiveNav();
med.setSlides();
med.runAnimations();
}});
}else if(intDelta<0){
//scrollControl.disableScroll();
$.smoothScroll({
speed:med.effectDuration,
easing:med.scrollEase,
scrollTarget:med.nextPage,
afterScroll: function(){
med.currentPage = med.nextPage;
med.setActiveNav();
med.setSlides();
med.runAnimations();
}});
}
}
if (!scrollControl.scrollTimer) {
if (now - scrollControl.lastScrollFireTime > (3 * minScrollTime)) {
processScroll(); // fire immediately on first scroll
scrollControl.lastScrollFireTime = now;
}
scrollTimer = setTimeout(function() {
scrollControl.scrollTimer = null;
scrollControl.lastScrollFireTime = new Date().getTime();
processScroll();
}, minScrollTime);
}
});
I'm executing scrollControl.disableScroll function on DOM ready event when users starts website. And actually scrolling once prevention doesn't works prefectly and sometimes it triggers smoothscrolling twice. What am I doing wrong? Thanks in advance for any suggestions!
I had the same issue the Mouse Wheel Event was fired Twice.
function wheelDisabled(event){
event.preventDefault();
event.stopImmediatePropagation();
return false;
}
Also you might use both of these Events.
window.addEventListener('DOMMouseScroll', wheel, false);
window.addEventListener('mousewheel', wheel, false);
Instead of trying to prevent scrolling with Javascript, I would try a different approach. This approach includes CSS and Javascript to make sure the website is never bigger then the viewport (hence no scrollbars!).
Use CSS to force the main wrapping div (a div that wraps all the content on the site) to have overflow: hidden. Then use Javascript to dynamically ensure that the height and width of this div is always equal to the viewport's height and width.
In this scenario, if you want to implement scrolling in a predefined way you choose you can dynamically add negative margin-top (or negative margin-left for horizontal scrolling) to the parent wrapping div to give it the appearance that it is scrolling.