[improvement] check event.cancelable before preventDefault

packages/field/index.js

@@ -2,6 +2,7 @@ import Icon from '../icon';
 import Cell from '../cell';
 import { cellProps } from '../cell/shared';
 import { use, isObj, isDef, isIOS } from '../utils';
+import { preventDefault } from '../utils/event';
 import { getRootScrollTop } from '../utils/scroll';
 import { isNumber } from '../utils/validate/number';
 
@@ -137,7 +138,7 @@ export default sfc({
     },
 
     onClear(event) {
-      event.preventDefault();
+      preventDefault(event);
       this.$emit('input', '');
       this.$emit('clear');
     },
@@ -148,8 +149,9 @@ export default sfc({
         const allowPoint = String(this.value).indexOf('.') === -1;
         const isValidKey =
           (keyCode >= 48 && keyCode <= 57) || (keyCode === 46 && allowPoint) || keyCode === 45;
+
         if (!isValidKey) {
-          event.preventDefault();
+          preventDefault(event);
         }
       }
 

packages/image-preview/ImagePreview.js

@@ -1,4 +1,5 @@
 import { use, range } from '../utils';
+import { preventDefault } from '../utils/event';
 import { PopupMixin } from '../mixins/popup';
 import { TouchMixin } from '../mixins/touch';
 import Swipe from '../swipe';
@@ -98,7 +99,7 @@ export default sfc({
     },
 
     onWrapperTouchEnd(event) {
-      event.preventDefault();
+      preventDefault(event);
 
       const deltaTime = new Date() - this.touchStartTime;
       const { offsetX = 0, offsetY = 0 } = this.$refs.swipe || {};
@@ -154,8 +155,7 @@ export default sfc({
     onTouchMove(event) {
       const { touches } = event;
       if (this.moving || this.zooming) {
-        event.preventDefault();
-        event.stopPropagation();
+        preventDefault(event, true);
       }
 
       if (this.moving) {
@@ -199,8 +199,7 @@ export default sfc({
         }
 
         if (stopPropagation) {
-          event.preventDefault();
-          event.stopPropagation();
+          preventDefault(event, true);
         }
       }
     },

packages/mixins/popup/index.js

@@ -1,6 +1,6 @@
 import { context } from './context';
 import { TouchMixin } from '../touch';
-import { on, off } from '../../utils/event';
+import { on, off, preventDefault } from '../../utils/event';
 import { openOverlay, closeOverlay, updateOverlay } from './overlay';
 import { getScrollEventTarget } from '../../utils/scroll';
 
@@ -176,13 +176,11 @@ export const PopupMixin = {
 
       /* istanbul ignore next */
       if (
-        event.cancelable &&
         status !== '11' &&
         this.direction === 'vertical' &&
         !(parseInt(status, 2) & parseInt(direction, 2))
       ) {
-        event.preventDefault();
-        event.stopPropagation();
+        preventDefault(event, true);
       }
     },
 

packages/number-keyboard/Key.js

@@ -1,4 +1,5 @@
 import { use } from '../utils';
+import { preventDefault } from '../utils/event';
 
 const [sfc, bem] = use('key');
 
@@ -29,8 +30,7 @@ export default sfc({
     },
 
     onBlur(event) {
-      event.preventDefault();
-      event.stopPropagation();
+      preventDefault(event, true);
       this.active = false;
     }
   },

packages/number-keyboard/index.js

@@ -1,5 +1,5 @@
 import { use } from '../utils';
-import { stop } from '../utils/event';
+import { stopPropagation } from '../utils/event';
 import Key from './Key';
 
 const [sfc, bem, t] = use('number-keyboard');
@@ -145,7 +145,7 @@ export default sfc({
           vShow={this.show}
           style={{ zIndex: this.zIndex }}
           class={bem([theme, { 'safe-area-inset-bottom': this.safeAreaInsetBottom }])}
-          onTouchstart={stop}
+          onTouchstart={stopPropagation}
           onAnimationend={this.onAnimationEnd}
           onWebkitAnimationEnd={this.onAnimationEnd}
         >

packages/overlay/index.tsx

@@ -1,5 +1,6 @@
 import { use } from '../utils';
 import { inherit } from '../utils/functional';
+import { preventDefault } from '../utils/event';
 
 // Types
 import { CreateElement, RenderContext } from 'vue/types';
@@ -36,8 +37,7 @@ function Overlay(
         style={style}
         class={[bem(), props.className]}
         onTouchmove={(event: TouchEvent) => {
-          event.preventDefault();
-          event.stopPropagation();
+          preventDefault(event, true);
         }}
         {...inherit(ctx, true)}
       />

packages/picker/PickerColumn.js

@@ -1,5 +1,6 @@
 import { deepClone } from '../utils/deep-clone';
 import { use, isObj, range } from '../utils';
+import { preventDefault } from '../utils/event';
 
 const DEFAULT_DURATION = 200;
 const [sfc, bem] = use('picker-column');
@@ -55,7 +56,7 @@ export default sfc({
     },
 
     onTouchMove(event) {
-      event.preventDefault();
+      preventDefault(event);
       const deltaY = event.touches[0].clientY - this.startY;
       this.offset = range(
         this.startOffset + deltaY,

packages/picker/index.js

@@ -1,5 +1,5 @@
 import { use } from '../utils';
-import { prevent } from '../utils/event';
+import { preventDefault } from '../utils/event';
 import { deepClone } from '../utils/deep-clone';
 import { pickerProps } from './shared';
 import Loading from '../loading';
@@ -177,7 +177,7 @@ export default sfc({
         ) : (
           h()
         )}
-        <div class={bem('columns')} style={columnsStyle} onTouchmove={prevent}>
+        <div class={bem('columns')} style={columnsStyle} onTouchmove={preventDefault}>
           {columns.map((item, index) => (
             <PickerColumn
               valueKey={this.valueKey}

packages/pull-refresh/index.js

@@ -1,7 +1,8 @@
 import { use } from '../utils';
-import Loading from '../loading';
+import { preventDefault } from '../utils/event';
 import { TouchMixin } from '../mixins/touch';
 import { getScrollTop, getScrollEventTarget } from '../utils/scroll';
+import Loading from '../loading';
 
 const [sfc, bem, t] = use('pull-refresh');
 const TEXT_STATUS = ['pulling', 'loosing', 'success'];
@@ -90,7 +91,7 @@ export default sfc({
       if (this.ceiling && this.deltaY >= 0) {
         if (this.direction === 'vertical') {
           this.setStatus(this.ease(this.deltaY));
-          event.cancelable && event.preventDefault();
+          preventDefault(event);
         }
       }
     },

packages/rate/index.tsx

@@ -1,6 +1,7 @@
 /* eslint-disable prefer-spread */
 import { use } from '../utils';
 import { emit, inherit } from '../utils/functional';
+import { preventDefault } from '../utils/event';
 import Icon from '../icon';
 
 // Types
@@ -74,7 +75,7 @@ function Rate(
       return;
     }
 
-    event.preventDefault();
+    preventDefault(event);
     const { clientX, clientY } = event.touches[0];
     const target = document.elementFromPoint(clientX, clientY) as HTMLElement;
 

packages/search/index.tsx

@@ -1,5 +1,6 @@
 import { use } from '../utils';
 import { inherit, emit } from '../utils/functional';
+import { preventDefault } from '../utils/event';
 import Field from '../field';
 
 // Types
@@ -70,7 +71,7 @@ function Search(
       keypress(event: KeyboardEvent) {
         // press enter
         if (event.keyCode === 13) {
-          event.preventDefault();
+          preventDefault(event);
           emit(ctx, 'search', props.value);
         }
         emit(ctx, 'keypress', event);

packages/slider/index.js

@@ -1,5 +1,6 @@
 import { use } from '../utils';
 import { TouchMixin } from '../mixins/touch';
+import { preventDefault } from '../utils/event';
 
 const [sfc, bem] = use('slider');
 
@@ -36,8 +37,7 @@ export default sfc({
     },
 
     onTouchMove(event) {
-      event.preventDefault();
-      event.stopPropagation();
+      preventDefault(event, true);
 
       if (this.disabled) return;
 

packages/swipe-cell/index.js

@@ -1,4 +1,5 @@
 import { use, range } from '../utils';
+import { preventDefault } from '../utils/event';
 import { TouchMixin } from '../mixins/touch';
 import { ClickOutsideMixin } from '../mixins/click-outside';
 
@@ -84,7 +85,7 @@ export default sfc({
       this.touchMove(event);
 
       if (this.direction === 'horizontal') {
-        event.preventDefault();
+        preventDefault(event);
         this.swipeMove(this.deltaX + this.startOffset);
       }
     },

packages/swipe/index.js

@@ -1,5 +1,5 @@
 import { use } from '../utils';
-import { on, off } from '../utils/event';
+import { on, off, preventDefault } from '../utils/event';
 import { TouchMixin } from '../mixins/touch';
 
 const [sfc, bem] = use('swipe');
@@ -168,8 +168,7 @@ export default sfc({
       this.touchMove(event);
 
       if (this.isCorrectDirection) {
-        event.preventDefault();
-        event.stopPropagation();
+        preventDefault(event, true);
         this.move({ offset: Math.min(Math.max(this.delta, -this.size), this.size) });
       }
     },

packages/utils/event.ts

@@ -41,10 +41,17 @@ export function off(target: HTMLElement, event: string, handler: EventHanlder) {
   }
 }
 
-export function stop(event: Event) {
+export function stopPropagation(event: Event) {
   event.stopPropagation();
 }
 
-export function prevent(event: Event) {
-  event.preventDefault();
+export function preventDefault(event: Event, isStopPropagation?: boolean) {
+  /* istanbul ignore else */
+  if (typeof event.cancelable !== 'boolean' || event.cancelable) {
+    event.preventDefault();
+  }
+
+  if (isStopPropagation) {
+    stopPropagation(event);
+  }
 }