使用材质UI对话框触发onTouchTap触发两次 [英] onTouchTap firing twice with material-ui dialog

问题描述

我们已经建立了一个React项目，该项目使用Material-ui来显示对话框.由于某些原因，当您单击触发对话框打开的按钮时，似乎触发了另一个触摸事件，这可能会触发对话框上的链接或按钮.当您通过单击按钮关闭对话框时，也会发生类似的问题.这样做时，对话框会关闭，但会在您单击的元素正后方的元素上触发另一个触摸事件.

We have built a React project that is using Material-ui to show dialog boxes. For some reason, when you click a button which triggers the dialog to open, a second touch event seems to fire which will potentially trigger a link or button that is on the dialog box. A similar issue happens when you close the dialog box by clicking on a button. When doing this, the dialog closes, but will trigger another touch event on an element that is directly behind the element you clicked on.

我们包括了react-tap-event-plugin以便使用Material-ui，并且只要此虚假拍击行为上没有2个元素重叠，该应用程序就可以很好地运行.

We have included the react-tap-event-plugin in order to use Material-ui and the app works really well as long as there aren't 2 elements overlapping on this ghost tap behaviour.

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

This is a simplified version of what our component looks like:

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事件.

It's when that action button "Finish" is clicked that the dialog closes and then an element behind it also receives a touchTap event.

如果有所作为，我们正在使用Cordova打包移动应用程序.我们仅在移动设备上(肯定是在iOS上)遇到此问题，而在Chrome中进行测试时也在设备模式上遇到此问题.

If it makes a difference, we are using Cordova to wrap the app for mobile. We are experiencing this issue only on mobile (definitely on iOS), but also on device mode while testing in Chrome.

我做错了什么?任何建议将不胜感激.

What am I doing wrong? Any advice would be appreciated.

推荐答案

问题是延迟触发onClick事件后，无论您是否处理onTouchTap事件.因此，在触发onTouchTap事件并关闭对话框后，在触发onTouchTap事件的相同位置延迟了另一个onClick事件.因此，对话框消失后，位于触摸"之下的任何元素都将收到onClick事件.

The problem is that after a delay an onClick event is triggered, whether you handle the onTouchTap event or not. So after the onTouchTap event is triggered and your Dialog closes there comes another onClick event after a delay at the same location your onTouchTap event was fired on. So whatever element lies 'under' your 'touch' after the dialog is gone will receive the onClick event.

要解决此问题，请执行以下操作:在onTouchTap事件处理程序中调用e.preventDefault(). 像这样:

To Fix this: call e.preventDefault() inside the onTouchTap event handler. Like this:

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

希望这会有所帮助.

这篇关于使用材质UI对话框触发onTouchTap触发两次的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！