From 1b025b847adc249cdf589f996fd0f7fccb5de180 Mon Sep 17 00:00:00 2001 From: 383514580 <383514580@qq.com> Date: Tue, 22 Oct 2019 23:36:02 +0800 Subject: [PATCH] =?UTF-8?q?feat:=20=E5=A2=9E=E5=8A=A0"preventDefaultExclud?= =?UTF-8?q?e"=E5=8F=82=E6=95=B0,=20=E7=94=A8=E6=9D=A5=E6=8E=92=E9=99=A4?= =?UTF-8?q?=E4=B8=8D=E9=9C=80=E8=A6=81=E9=98=BB=E6=AD=A2=E9=BB=98=E8=AE=A4?= =?UTF-8?q?=E4=BA=8B=E4=BB=B6=E7=9A=84=E5=85=83=E7=B4=A0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- README.md | 14 +++++++++- __tests__/preventDefaultExclude.spec.ts | 24 ++++++++++++++++ example/index.css | 4 +-- example/index.html | 14 ++++++++-- example/index.js | 7 +++-- src/AnyTouch.ts | 37 ++++++++++++++++--------- src/utils/is.ts | 9 ++++++ 7 files changed, 87 insertions(+), 22 deletions(-) create mode 100644 __tests__/preventDefaultExclude.spec.ts create mode 100644 src/utils/is.ts diff --git a/README.md b/README.md index c4a81bf5..1bcff3cd 100644 --- a/README.md +++ b/README.md @@ -82,7 +82,7 @@ at.on('roatemove', ev=>{}); ``` ```javascript -cosnt at = new AnyTouch() +const at = new AnyTouch() { onload(){ at.on('pinch', ev=>{ @@ -156,6 +156,18 @@ export default { [做一个drawer(抽屉)插件](https://codepen.io/russell2015/pen/jJRbgp?editors=0010) + +## 参数说明 +|名称|类型|默认值|简要说明| +|---|---|---|---| +|touchAction|`String`|`'compute'`|对应css的touch-action属性| +|hasDomEvents|`Boolean`|`true`|是否派发手势名对应的原生事件| +|isPreventDefault|`Boolean`|`true`|是否阻止默认事件| +|preventDefaultExclude|`RegExp | ((ev: SupportEvent) => boolean)`|`/^(INPUT|TEXTAREA|BUTTON|SELECT)$/`|符合条件可不阻止默认事件的触发| +|preventDefaultExclude|`RegExp | ((ev: SupportEvent) => boolean)`|`/^(INPUT|TEXTAREA|BUTTON|SELECT)$/`|符合条件可不阻止默认事件的触发| +syncToAttr|`Boolean`|`true`|是否在元素上的`at-gesture`属性赋值当前手势名| +cssPrevent|`Object`|`{selectText: true,drag: true, tapHighlight: true, callout: true}`|是否开启上述禁止浏览器默认事件的css属性| + ## 不要用alert调试 :heavy_exclamation_mark::heavy_exclamation_mark::heavy_exclamation_mark: 在安卓手机的真机上, 如果`touchstart`或`touchmove`阶段触发了`alert`, 会出现后续的`touchmove/touchend`不触发的 bug. 所以请大家务必避免在手势的事件回调中使用`alert`. diff --git a/__tests__/preventDefaultExclude.spec.ts b/__tests__/preventDefaultExclude.spec.ts new file mode 100644 index 00000000..44bc8536 --- /dev/null +++ b/__tests__/preventDefaultExclude.spec.ts @@ -0,0 +1,24 @@ +// import TouchSimulator from './utils/TouchSimulator'; +// import sleep from './utils/sleep'; +import AnyTouch from '../src/main' +const el = document.createElement('div'); +// const childEl = document.createElement('input'); +// childEl.type = 'checkbox'; +// // input +// el.appendChild(childEl); + +// 暂时没想到如何触发元素的默认行为, 所以没法完美还原实际情况 +test('preventDefaultExclude通过函数指定排除', async (done) => { + const at = new AnyTouch(el, { + preventDefaultExclude(ev) { + return 'div' === (ev).target.tagName; + } + }); + const canPreventDefault = at.canPreventDefault(({ target: { tagName: 'div' } })); + expect(canPreventDefault).toBeTruthy(); + done(); +}); + + + + diff --git a/example/index.css b/example/index.css index 5a4022ac..255e7760 100644 --- a/example/index.css +++ b/example/index.css @@ -94,8 +94,8 @@ main table tr td:nth-child(3) { box-sizing: content-box; width: 150px; height: 150px; - border-radius: 10%; - background: rgba(255, 255, 255, 0.2); + border-radius: 5%; + background: rgba(255, 255, 255, 0.8); position: fixed; line-height: 150px; text-align: center; diff --git a/example/index.html b/example/index.html index d5d85d9d..769457eb 100644 --- a/example/index.html +++ b/example/index.html @@ -3,7 +3,8 @@ - + 🖐 AnyTouch @@ -48,7 +49,7 @@

返回数据说明

{{message.pointLength}} 触点数 - + maxPointLength {{message.maxPointLength}} @@ -206,13 +207,20 @@

返回数据说明

left:`${x}px`, transform: `scale(${scale}) rotate(${angle}deg)` - }">{{message.type||activeType}} + }">{{message.type||activeType}}1231313 + xsadsadasd +