feat(touch events): use passive mode in more cases quasarframework#12822

pdanpdan · Sep 30, 2022 · 4f5f067 · 4f5f067
1 parent 7b668f3
commit 4f5f067
Show file tree

Hide file tree

Showing 5 changed files with 9 additions and 7 deletions.
diff --git a/ui/src/components/btn/QBtn.js b/ui/src/components/btn/QBtn.js
@@ -11,6 +11,7 @@ import { createComponent } from '../../utils/private/create.js'
 import { hMergeSlot } from '../../utils/private/render.js'
 import { stop, prevent, stopAndPrevent, listenOpts } from '../../utils/event.js'
 import { isKeyCode } from '../../utils/private/key-composition.js'
+import useSplitAttrs from '../../composables/private/use-split-attrs.js'
 
 const { passiveCapture } = listenOpts
 
@@ -31,15 +32,16 @@ export default createComponent({
 
   emits: [ 'click', 'keydown', 'touchstart', 'mousedown', 'keyup' ],
 
-  setup (props, { slots, emit }) {
-    const { proxy } = getCurrentInstance()
+  setup (props, { slots, emit, attrs }) {
+    const { proxy, vnode } = getCurrentInstance()
 
     const {
       classes, style, innerClasses,
       attributes,
       hasRouterLink, hasLink, linkTag, navigateToRouterLink,
       isActionable
     } = useBtn(props)
+    const { listeners } = useSplitAttrs(attrs, vnode)
 
     const rootRef = ref(null)
     const blurTargetRef = ref(null)
@@ -84,7 +86,7 @@ export default createComponent({
           onClick,
           onKeydown,
           onMousedown,
-          onTouchstart
+          [ listeners.value.onTouchstart !== void 0 ? 'onTouchstart' : 'onTouchstartPassive' ]: onTouchstart
         }
       }
 

diff --git a/ui/src/directives/TouchHold.js b/ui/src/directives/TouchHold.js
@@ -132,7 +132,7 @@ export default createDirective(__QUASAR_SSR_SERVER__
 
         client.has.touch === true && addEvt(ctx, 'main', [
           [ el, 'touchstart', 'touchStart', `passive${ modifiers.capture === true ? 'Capture' : '' }` ],
-          [ el, 'touchend', 'noop', 'notPassiveCapture' ]
+          [ el, 'touchend', 'noop', 'passiveCapture' ]
         ])
       },
 

diff --git a/ui/src/directives/TouchPan.js b/ui/src/directives/TouchPan.js
@@ -388,7 +388,7 @@ export default createDirective(__QUASAR_SSR_SERVER__
 
         client.has.touch === true && addEvt(ctx, 'main', [
           [ el, 'touchstart', 'touchStart', `passive${ modifiers.capture === true ? 'Capture' : '' }` ],
-          [ el, 'touchmove', 'noop', 'notPassiveCapture' ]
+          [ el, 'touchmove', 'noop', 'passiveCapture' ]
         ])
       },
 

diff --git a/ui/src/directives/TouchRepeat.js b/ui/src/directives/TouchRepeat.js
@@ -209,7 +209,7 @@ export default createDirective(__QUASAR_SSR_SERVER__
 
         client.has.touch === true && addEvt(ctx, 'main', [
           [ el, 'touchstart', 'touchStart', `passive${ modifiers.capture === true ? 'Capture' : '' }` ],
-          [ el, 'touchend', 'noop', 'notPassiveCapture' ]
+          [ el, 'touchend', 'noop', 'passiveCapture' ]
         ])
 
         keyboard.length > 0 && addEvt(ctx, 'main', [

diff --git a/ui/src/directives/TouchSwipe.js b/ui/src/directives/TouchSwipe.js
@@ -234,7 +234,7 @@ export default createDirective(__QUASAR_SSR_SERVER__
 
         client.has.touch === true && addEvt(ctx, 'main', [
           [ el, 'touchstart', 'touchStart', `passive${ modifiers.capture === true ? 'Capture' : '' }` ],
-          [ el, 'touchmove', 'noop', 'notPassiveCapture' ]
+          [ el, 'touchmove', 'noop', 'passiveCapture' ]
         ])
       },