触摸 MDB Pro component

触控-Bootstrap 5和Material Design 2.0

该组件可让您通过调用以下命令来改善移动触摸屏上的用户体验以下自定义事件上的方法：捏，轻扫，点击，按下，平移和旋转。

注意：阅读 API 标签以找到所有可用选项，然后高级定制

注意：此方法仅适用于 移动触摸屏，因此不适用于鼠标或键盘事件。

按

当元素上的触摸事件持续时间超过250时，Press调用选定的方法毫秒。

Hold the button to remove the mask from the image

按下时间

触摸事件新闻并自定义持续时间。

Hold the button to remove the mask from the image with 5s

点按

使用包含原始字段（x和y）的对象调用tap事件上的回调协调用户的触摸。

Tap button to change a color

双击

设置默认点击以触摸事件。

Change background color with 2 taps

泛

平移事件对于拖动元素很有用-每次用户在屏幕上移动手指时指令所附加的元素，则使用由两个键组成的参数：x和y（值对应于水平和垂直翻译）。

向左平移

向右平移

仅向正确方向平移

平移上/下

仅向上/向下方向平移

捏

pinch事件使用包含两个键的对象（比率和原点）调用给定方法。第一个是用户在触摸端上的手指之间的距离与相同手指之间的距离之比触摸启动时的距离-这对于缩放图像特别有用。第二个，与doubleTap事件类似，是一对坐标，指示之间的中间点用户的手指。

向左/向右滑动

滑动事件带有几个修改器（向左，向右，向上，向下）-每个都会确保仅向该特定方向的滑动触发事件。如果指令是如果不使用任何修饰符，则每次滑动时都会调用回调方法，指示方向的字符串将作为参数传递。

本示例显示左右示例

Swipe Left-Right to change a color

向上/向下滑动

此示例显示上下左右的示例

Swipe Up-Down to change a color

旋转

此示例显示了带有rotate的示例

触摸 - API

用法

通过JavaScript

JavaScript


        const myTouch = new mdb.Touch(document.getElementById('id'), event, options)

通过jQuery

注意：默认情况下，MDB 不包含jQuery，并且您拥有自行添加到项目中。

jQuery


        $('.example-class').touch(event, options);

选件

点按

Name	Type	Default	Description
`interval`	number	`500`	Set interval to tap
`time`	number	`250`	Set delays time to tap event
`taps`	number	`1`	Set default value of number for taps
`pointers`	number	`1`	Set default value of number for pointers

按

Name	Type	Default	Description
`time`	number	`250`	Set time delays to take tap
`pointers`	number	`1`	Set default value of number for pointers

滑动

Name	Type	Default	Description
`threshold`	number	`10`	Set distance bettwen when event fires
`direction`	string	`all`	Set direction to swipe. Available options: all, right, left, top, up.

旋转

Name	Type	Default	Description
`angle`	number	`0`	Set started angle to rotate.
`pointers`	number	`2`	Set default value of number for pointers

泛

Name	Type	Default	Description
`threshold`	number	`20`	Set distance bettwen when event fires
`direction`	string	`all`	Set direction to pan. Available options: all, right, left, top, up.
`pointers`	number	`1`	Set default value of number for pointers

捏

Name	Type	Default	Description
`pointers`	number	`2`	Option for `tap` event, set duration to how long it takes to take a tap
`threshold`	number	`10`	Set distance bettwen when event fires

方法

Name	Description	Example
`dispose`	Destroy component with this method	`element.dispose()`

JavaScript


        const element = document.getElementById('id')
        const myTouch = new mdb.Touch(element, 'tap')
        myTouch.dispose()

大事记

Name	Description
`tap`	This event fires tap touch funcionality.

JavaScript


        const element = document.getElementById('element-id');
        const touchEvent = new mdb.Touch(element, 'tap')
        element.addEventListener('tap', (e) => {
          // do something...
        })

Name	Description
`press`	This event fires press touch funcionality.

JavaScript


        const element = document.getElementById('element-id');
        const touchEvent = new mdb.Touch(element, 'doubletap')
        element.addEventListener('doubletap', (e) => {
          // do something...
        })

Name	Description
`pan`	This event fires pan touch funcionality.

JavaScript


        const element = document.getElementById('element-id');
        const touchEvent = new mdb.Touch(element, 'pan')
        element.addEventListener('pan', (e) => {
          // do something...
        })

Name	Description
`pinch`	This event fires pinch touch funcionality.

JavaScript


        const element = document.getElementById('element-id');
        const touchEvent = new mdb.Touch(element, 'pinch')
        element.addEventListener('pinch', (e) => {
          // do something...
        })

Name	Description
`swipe`	This event fires swipe touch funcionality.

JavaScript


        const element = document.getElementById('element-id');
        const touchEvent = new mdb.Touch(element, 'swipe')
        element.addEventListener('swipe', (e) => {
          // do something...
        })

Name	Description
`rotate`	This event fires rotate touch funcionality.

JavaScript


        const element = document.getElementById('element-id');
        const touchEvent = new mdb.Touch(element, 'rotate')
        element.addEventListener('rotate', (e) => {
          // do something...
        })

进口

MDB UI KIT 也可与模块捆绑器一起使用。使用以下代码导入此组件：

JavaScript


        import { Touch } from 'mdb-ui-kit';