JQuery - Can I query the MacBook Pro Trackpad?

JQuery - Can I query the MacBook Pro Trackpad?

Can I use JQuery to query the Trackpad? So I can do something like this:

Pseudo Javascript (JQuery)

$(document).keyInput().trackpadTwoFingersLeft(function() {
  $('#div ul').animate({left: "=+1"},1);
});

Is there a plugIn or another framework where I can do this? Thank you for every response and idea. :)


I've looked around a bit on the web, and so far see that both Chrome and Safari do not expose these events in the browser.

https://superuser.com/questions/27627/three-finger-page-up-page-down-in-safari-chrome

Touch events available in Safari?

Firefox does support something:

https://developer.mozilla.org/En/DOM/Mouse_gesture_events

But I don't see a lot of references to this.

I guess when only one browser supports it, it is a bit useless to use these kind of events.

JQuery - Can I query the MacBook Pro Trackpad?, Can I use JQuery to query the Trackpad? So I can do something like this: Pseudo Javascript (JQuery) $(document).keyInput().trackpadTwoFingersLeft(function()  You can set trackpad options that’ll affect clicking, secondary clicking, dragging, and more. Depending on your trackpad, you see only some of these configuration options. In Windows on your Mac, click in the right side of the taskbar, click the Boot Camp icon , then choose Boot Camp Control Panel.


There is a wheel event which you can use to detect two-finger swipe on Mac.

Your code could look something like this:

      $('element').on('wheel', function(e){
        var eo = e.originalEvent;
        if(Math.abs(eo.wheelDeltaY) < 10 && Math.abs(eo.wheelDeltaX) > 2){
          e.preventDefault();

          if(eo.wheelDeltaX < -100 && !scope.item.swipedLeft){
              // swipe left
          }

          if(eo.wheelDeltaX > 100 && scope.item.swipedLeft){
              // swipe right
          }
        }
      });

This could possibly not work in some older browser and/or Mozilla (as it fires some different event for the wheel movement), but as long as you implement this as an additional/helper feature, this code should suffice.

Change Trackpad preferences on Mac, For example, you can change how fast the onscreen pointer moves when you move your finger across the trackpad and customise the gestures you use with your  Fix Macbook’s TrackPad that doesnt Click 2019: Apple is known for producing a device which is stagnant free and hence they don’t take any chance when it comes to the quality of hardware they use. Some of the users shoot out the query that their MacBook trackpad Pro doesn’t click.


You could probably use mouse wheel tracking to get the desired effect: http://www.switchonthecode.com/tutorials/javascript-tutorial-the-scroll-wheel

If you want to use jQuery, this mousewheel plugin should help: http://brandonaaron.net/code/mousewheel/docs

Debouncing and Throttling Explained Through Examples, When scrolling using a trackpad, scroll wheel, or just by dragging a scrollbar With this simple technique, we can avoid ruining the user experience. Soon after that, Ben Alman created a jQuery plugin (no longer maintained), We can use the rAF API, as an alternative to the throttle function, considering this pros/​cons:  How to Disable TrackPad on MacBook Pro January 7, 2020 The trackpad on your MacBook Pro is a crafty piece of engineering and technology that has allowed laptop-style computers to become smaller and lighter while at the same time, allowing you to complete any and all functions that once were only possible with the use of an external mouse.


We manage to determine trackpad usage by first assuming an OSX machine has it and then working to detect if that user has a mouse plugged in. Excuse me, because we use typescript, but it will work in javascript.

First, just look at the user agent properties, and then if OSX, assume it has one. I just use some basic string expressions on the user agent to determine what the OS is.

 if (!props.isMobile && props.operatingSystem === OSType.Darwin) {
        props.hasTouchpad = true
        props.hasGestureSupport = props.browser === BrowserType.Safari | props.isMobile
 }

Now work to eliminate that device by listening to the wheel event. A trackpad device will create really small deltaY values that are non-integer. I have tried this and it does a very good job.

    const detectMouseType = useCallback((e:WheelEvent) => {

        if (e.ctrlKey || !browserProperties.hasTouchpad) {
            //Didn't detect originally, or pinch zoom OSX and surface, ignore
            return
        }

        let isMouse = e.deltaX === 0 && !Number.isInteger(e.deltaY)

        isMouseCounts.push(isMouse ? 1 : 0)
        if (isMouseCounts.length > 5) isMouseCounts.shift()

        let sum = isMouseCounts.reduce(function(a, b) { return a + b; });

        if (sum > 3 && e.type === "wheel") {
            console.log("Touchpad disabled")
            //detected a mouse not a touchpad, maybe a mouse plugged into a mac
            document.removeEventListener('wheel', detectMouseType);

            props.hasTouchpad = false
            props.hasGestureSupport = false
        }
    }, [])

Now onto using trackpad events and detecting pinch in browsers that normally don't support it (HammerJS for example): On OSX Safari and iOS Safari the "gesturestart" and "gesturechange" events are fired which are sufficient for detecting pinch and rotate. There are scale and rotate parameters you can use to get the data you need.

Here's some code to get you started:

https://medium.com/@auchenberg/detecting-multi-touch-trackpad-gestures-in-javascript-a2505babb10e

On OSX Chrome, you can use the "wheel" event to detect pinch, scroll, and two finger tap. Most solutions you'll see will not support pinch or two finiger tap on OSX Chrome, but this will. Here's how two finger tap and pinch are done for Chrome and also mice on all other browsers:

let scale = 1.0;
let posX = 0.0;
let posY = 0.0;

element.addEventListener('wheel', (e) => {
     e.preventDefault();
     if (e.ctrlKey) {
          //using two fingers
          if (e.deltaY === 0 && e.deltaX === 0) {
             console.log("Chrome two finger tap detected")
          } else {
             console.log("pinch zoom")
             scale = scale - e.deltaY * 0.01
          }
     } else {
          console.log('scrolling')
          posX = posX - e.deltaX * 2
          posY = posY - e.deltaY * 2
     }
});

Creating responsive, touch-friendly carousels with Flickity, You can use Flickity as a jQuery plugin: $('selector').flickity() . Because cells are sized and styled with CSS, you can use media queries to show different  You can also get the latest Trackpad firmware update. To do so, launch the App Store and tap on the update at the top. Here look for the ‘Trackpad firmware update’ and if anything is available, do not think twice to click on that update button. How To Fix MacBook Trackpad Not Working: Reset SMC


There's some info here but I wasn't able to test it

function setupForceClickBehavior(someElement)
{
  // Attach event listeners in preparation for responding to force clicks
  someElement.addEventListener("webkitmouseforcewillbegin", prepareForForceClick, false);
  someElement.addEventListener("webkitmouseforcedown", enterForceClick, false);
  someElement.addEventListener("webkitmouseforceup", endForceClick, false);
  someElement.addEventListener("webkitmouseforcechanged", forceChanged, false);
}

https://developer.apple.com/library/archive/documentation/AppleApplications/Conceptual/SafariJSProgTopics/RespondingtoForceTouchEventsfromJavaScript.html#//apple_ref/doc/uid/TP40016162-SW6

JavaScript e jQuery - Ferramentas Web - 10, 14 javascript & jquery: the missing manual The Very Basics \u2022 Part 5, at all​\u2014to press and release the clicker button on the mouse (or laptop trackpad). on a Mac and don\u2019t have a right mouse button, you can accomplish the  De-duplicate Music Files in MacBook Air/Pro How to Find and Delete Similar Images on MacBook How to Keep Your MacBook from Overheating MacBook Won't Charge? Here's What to Do [User Guide] How to Set Up A New MacBook Pro How Can I Fix My MacBook Won't Shut Down


Basics Interactive Design: User Experience Design: Creating , If you externalize a fragment of an idea then that can be used as a starting point identical in many applications on the Apple iPhone but are handled differently on 175, 176, 177 Mafia II 70 markup 184 media query see jQuery message 118, 168-77 tracking 74, 185 trackpad 185 transmission 118 Transparent Screen  Can I use JQuery to query the Trackpad? So I can do something like this: Pseudo Javascript (JQuery) $(document).keyInput().trackpadTwoFingersLeft(function() { $('#div ul').animate({left: "=+1"},1); }); Is there a plugIn or another framework where I can do this? Thank you for every response and idea.


jQuery Mobile 1.4 Browser Support, Apple iOS 4-8.1 – Tested on the original iPad (4.3 / 5.0), iPad 2 (7.2 / 8.1 / 6.1), iPad iPad Retina (7.0), iPhone 3GS (4.3), iPhone 4 (4.3 / 5.1), iPhone 4S (5.1 / 6.0), Note: transition performance can be poor on upgraded devices; Android 3.2 (1.4-3.0) – Tested on the Palm Pixi (1.4), Pre (1.4), Pre 2 (2.0), HP TouchPad  That process uses a non unibody macbook pro trackpad hack from 2008. As it does without the use of unibody components, it is possible, as shown in the other thread you linked to, But only for Black and white pre unibody MacBooks Made from late 2007.


javascript - JQuery, He mirado todo un poco en la web, y hasta ahora veo que tanto Chrome y Safari no exponen estos eventos en el navegador. AirPods Pro AirPods Studio Apple Car Apple Deals Apple Glasses Apple Pay Apple Pro Display XDR Apple Stores Apple TV Apple Watch CarPlay HomePod iMac iMac Pro iOS 13 iOS 14 iPad iPad Air iPad mini 5 iPad Pro iPadOS iPhone 11 iPhone 11 Pro iPhone 12 iPhone SE 2020 iPhone XR iPhone XS iPod touch Mac mini Mac Pro MacBook Air MacBook Pro macOS 10.16