onClick可以工作，但是onDoubleClick在React组件上被忽略

70

我正在用React构建一个Minesweeper游戏，并希望在单击单元格或双击单元格时执行其他操作。当前，该onDoubleClick功能永远不会触发，onClick显示来自的警报。如果我删除onClick处理程序，则onDoubleClick可以。为什么两个事件都不起作用？是否可以在一个元素上同时存在两个事件？

/** @jsx React.DOM */

var Mine = React.createClass({
  render: function(){
    return (
      <div className="mineBox" id={this.props.id} onDoubleClick={this.props.onDoubleClick} onClick={this.props.onClick}></div>
    )
  }
});

var MineRow = React.createClass({
  render: function(){
    var width = this.props.width,
        row = [];
    for (var i = 0; i < width; i++){
      row.push(<Mine id={String(this.props.row + i)} boxClass={this.props.boxClass} onDoubleClick={this.props.onDoubleClick} onClick={this.props.onClick}/>)
    }
    return (
      <div>{row}</div>
    )
  }
})

var MineSweeper = React.createClass({
  handleDoubleClick: function(){
    alert('Double Clicked');
  },
  handleClick: function(){
    alert('Single Clicked');
  },
  render: function(){
    var height = this.props.height,
        table = [];
    for (var i = 0; i < height; i++){
      table.push(<MineRow width={this.props.width} row={String.fromCharCode(97 + i)} onDoubleClick={this.handleDoubleClick} onClick={this.handleClick}/>)
    }
    return (
      <div>{table}</div>
    )
  }
})

var bombs = ['a0', 'b1', 'c2'];
React.renderComponent(<MineSweeper height={5} width={5} bombs={bombs}/>, document.getElementById('content'));
javascript  reactjs 
— 这是一个
source
2
由于第一次单击后会弹出警报，因此您永远无法执行第二次单击来触发dblclick事件。有关无法阻止首次点击的原因，请参见我的答案。
— 罗斯·艾伦
解决方法如何？跟踪两次单击之间的时间，并考虑双击在特定持续时间（例如600毫秒）内发生的任何两次单击。
— kayleeFrye_onDeck

Answers:

64

这不是React的限制，而是DOMclick和dblclick事件的限制。根据Quirksmode的点击文档的建议：

不要在同一元素上注册click和dblclick事件：不可能将单击事件与导致dblclick事件的单击事件区分开。

有关最新文档，该dblclick事件的W3C规范指出：

当在元素上单击定点设备的主按钮两次时，用户代理必须调度此事件。

两次单击事件之后必然会发生一次双击事件。

编辑：

建议阅读的另一本书是jQuery的dblclick处理程序：

将处理程序绑定到同一元素的click和dblclick事件都是不可取的。触发事件的顺序因浏览器而异，其中一些事件在dblclick之前收到两个click事件，而其他事件只有一个。双击敏感度（检测为两次单击之间的最长间隔时间）可能因操作系统和浏览器而异，并且通常可由用户配置。

— 罗斯·艾伦
source
29

可以通过在触发常规单击操作时提供非常小的延迟来实现所需的结果，当发生双击事件时，该延迟将被取消。

  let timer = 0;
  let delay = 200;
  let prevent = false;

  doClickAction() {
    console.log(' click');
  }
  doDoubleClickAction() {
    console.log('Double Click')
  }
  handleClick() {
    let me = this;
    timer = setTimeout(function() {
      if (!prevent) {
        me.doClickAction();
      }
      prevent = false;
    }, delay);
  }
  handleDoubleClick(){
    clearTimeout(timer);
    prevent = true;
    this.doDoubleClickAction();
  }
 < button onClick={this.handleClick.bind(this)} 
    onDoubleClick = {this.handleDoubleClick.bind(this)} > click me </button>
— 阿坎莎（Akanksha Chaturvedi）
source
很好的解决方案，谢谢！我有点困惑：实际上是否需要同时使用“ prevent”和“ clearTimeout（）”？这两种情况都不足够吗？
— 妮可，
16

编辑：

我发现这不是React 0.15.3的问题。


原版的：

对于React 0.13.3，这是两个解决方案。

1. ref回调

请注意，即使在双击的情况下，单击处理程序也会被调用两次（每次单击一次）。

const ListItem = React.createClass({

  handleClick() {
    console.log('single click');
  },

  handleDoubleClick() {
    console.log('double click');
  },

  refCallback(item) {
    if (item) {
      item.getDOMNode().ondblclick = this.handleDoubleClick;
    }
  },

  render() {
    return (
      <div onClick={this.handleClick}
           ref={this.refCallback}>
      </div>
    );
  }
});

module.exports = ListItem;

2. lodash跳动

我有另一个使用过的解决方案lodash，但是由于复杂性，我放弃了它。这样做的好处是“ click”仅被调用一次，而在“ double-click”情况下则根本不被调用。

import _ from 'lodash'

const ListItem = React.createClass({

  handleClick(e) {
    if (!this._delayedClick) {
      this._delayedClick = _.debounce(this.doClick, 500);
    }
    if (this.clickedOnce) {
      this._delayedClick.cancel();
      this.clickedOnce = false;
      console.log('double click');
    } else {
      this._delayedClick(e);
      this.clickedOnce = true;
    }
  },

  doClick(e) {
    this.clickedOnce = undefined;
    console.log('single click');
  },

  render() {
    return (
      <div onClick={this.handleClick}>
      </div>
    );
  }
});

module.exports = ListItem;

在肥皂盒上

我很欣赏的想法，双击是不容易发现的东西，但是是好还是坏它IS存在和一个用户理解，因为它在操作系统中流行的一个范例。此外，这是现代浏览器仍支持的范例。在将其从DOM规范中删除之前，我认为React应该支持onDoubleClick旁边的功能性prop onClick。不幸的是，似乎他们没有。

— 杰夫·费尔利
source
在React 15.3中怎么不是问题？
— Sassan
2
@Sassan我在最新版本的react（15.6.1）上都没有看到这个问题-两者都按预期启动。请注意，在双击时，普通的单击处理程序也会触发两次，但是我敢肯定这是可以预期的。
— Skipjack
6

您可以使用自定义钩子来处理简单的单击和双击，如下所示：

function useSimpleAndDoubleClick(actionSimpleClick, actionDoubleClick, delay = 250) {
    const [click, setClick] = useState(0);

    useEffect(() => {
        const timer = setTimeout(() => {
            // simple click
            if (click === 1) actionSimpleClick();
            setClick(0);
        }, delay);

        // the duration between this click and the previous one
        // is less than the value of delay = double-click
        if (click === 2) actionDoubleClick();

        return () => clearTimeout(timer);
        
    }, [click]);

    return () => setClick(prev => prev + 1);
}

然后在您的组件中可以使用：

const click = useSimpleAndDoubleClick(callbackClick, callbackDoubleClick);
<button onClick={click}>clic</button>
— 厄米娜·妮亚（Erminea Nea）
source
1
这绝对是2020年的正确答案：）
— Mustafa Yilmaz
4

这就是我所做的。欢迎提出任何改进建议。

class DoubleClick extends React.Component {
  state = {counter: 0}

  handleClick = () => {
   this.setState(state => ({
    counter: this.state.counter + 1,
  }))
 }


  handleDoubleClick = () => {
   this.setState(state => ({
    counter: this.state.counter - 2,
  }))
 }

 render() {
   return(
   <>
    <button onClick={this.handleClick} onDoubleClick={this.handleDoubleClick>
      {this.state.counter}
    </button>
   </>
  )
 }
}
— 亚历克斯·米雷莱斯
source
0

这是基于Erminea解决方案的具有增量和识别值的like按钮的解决方案。

useEffect(() => {
    let singleClickTimer;
    if (clicks === 1) {
      singleClickTimer = setTimeout(
        () => {
          handleClick();
          setClicks(0);
        }, 250);
    } else if (clicks === 2) {
      handleDoubleClick();
      setClicks(0);
    }
    return () => clearTimeout(singleClickTimer);
  }, [clicks]);

  const handleClick = () => {
    console.log('single click');
    total = totalClicks + 1;
    setTotalClicks(total);
  }

  const handleDoubleClick = () => {
    console.log('double click');
    if (total > 0) {
      total = totalClicks - 1;
    }
    setTotalClicks(total);
  }

  return (
    <div
      className="likeButton"
      onClick={() => setClicks(clicks + 1)}
    >
      Likes | {totalClicks}
    </div>
)
— 马诺斯
source
0

这是实现承诺的一种方法。waitForDoubleClick返回一个Promise仅在未执行双击时才能解析的。否则它将拒绝。时间可以调整。

    async waitForDoubleClick() {
    return new Promise((resolve, reject) => {
      const timeout = setTimeout(() => {
        if (!this.state.prevent) {
          resolve(true);
        } else {
          reject(false);
        }
      }, 250);
      this.setState({ ...this.state, timeout, prevent: false })
    });
  }
  clearWaitForDoubleClick() {
    clearTimeout(this.state.timeout);
    this.setState({
      prevent: true
    });
  }
  async onMouseUp() {
    try {
      const wait = await this.waitForDoubleClick();
      // Code for sinlge click goes here.
    } catch (error) {
      // Single click was prevented.
      console.log(error)
    }
  }
— DivineCoder
source
By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.