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 +