reactjs - onTouchTap 使用 Material-ui 对话框触发两次

Question

我们已经构建了一个使用 Material-ui 来显示对话框的 React 项目。由于某种原因，当您单击触发对话框打开的按钮时，似乎会触发第二个触摸事件，这可能会触发对话框上的链接或按钮。当您通过单击按钮关闭对话框时，也会出现类似的问题。执行此操作时，对话框将关闭，但会在您单击的元素正后方的元素上触发另一个触摸事件。

我们已经包含了 react-tap-event-plugin 以便使用 Material-ui，并且只要没有 2 个元素在此幽灵点击行为上重叠，该应用程序就可以正常工作。

这是我们组件的简化版本:

import React, { Component } from 'react'
import Dialog from 'material-ui/Dialog'

class Introduction extends Component {
  constructor(props) {
    super(props)

    this.state = { complete: false }

    this.finish = this.finish.bind(this)
  }

  finish() {
    this.setState({ complete: true })
  }

  render() {
    const actions = (
      <div>
        <button onTouchTap={this.finish}>Finish</button>
      </div>
    )

    if (!this.state.complete) {
      return (
        <Dialog open actions={actions}>
          <h3>Dialog header</h3>
          <p>Dialog text</p>
        </Dialog>
      )
    }

    return null
  }
}

当单击操作按钮“完成”时，对话框将关闭，然后其后面的元素也会收到 touchTap 事件。

如果有什么不同的话，我们将使用 Cordova 来包装移动应用程序。我们仅在移动设备上遇到此问题(当然是在 iOS 上)，而且在 Chrome 中测试时也在设备模式上遇到此问题。

我做错了什么？任何建议将不胜感激。

Answer 1

问题是，无论您是否处理 onTouchTap 事件，延迟后都会触发 onClick 事件。因此，在触发 onTouchTap 事件并且您的对话框关闭后，在触发 onTouchTap 事件的同一位置延迟后，会出现另一个 onClick 事件。因此，对话框消失后位于“触摸”“下方”的任何元素都将收到 onClick 事件。

要解决此问题:在 onTouchTap 事件处理程序中调用 e.preventDefault()。像这样:

<Button onTouchTap={(e) => { e.preventDefault(); this.finish()}}>Finish</Button>

希望这有帮助。