Support e.preventDefault() and e.stopPropagation() in tap/drag events

• In my app I have <Link> elements inside a draggable <motion.div> element. When the user clicks those, I don’t want the drag/whileTap styles to activate.
• I tried to achieve this by blocking propagation of the onMouseDown event, but this doesn’t seem to have any effect.
• In fact, the onMouseDown event is never fired at all on any of the childs of the draggable element.

See: https://codesandbox.io/s/framer-motion-block-mousedown-inside-draggable-item-3ecgd

Expected/Desired behaviour: when clicking the white box, the colored <motion.div> element should not scale up and/or follow the cursor when dragging.

Is there a way to do this?

[brentjett]

Scratch that, found a way using useDragControls().

onDragStart={ ( e, info ) => {

    // Check if event doesn't originate in the "handle" element
    if ( ! e.target.classList.contains( 'drag-handle' ) ) {

        // Stop the drag
        controls.componentControls.forEach( entry => {
            // be sure to pass along the event & info or it gets angry
            entry.stop( e, info )
        })
    }
} }

Works great.

[mattgperry]

I think with these slightly more advanced use-cases you’re better off handling gesture animation states yourself with useState. I’m going to leave the ticket open though as I think the request itself is a fair one.