在react里边实现单击双击

最新推荐文章于 2023-07-05 17:07:01 发布

晚东

最新推荐文章于 2023-07-05 17:07:01 发布

阅读量1.3k

点赞数

文章标签： javascript 前端开发语言

本文链接：https://blog.csdn.net/weixin_45239190/article/details/130013619

版权

1. class组件容器实现

import React, { Component } from 'react';
import PropTypes from 'prop-types';

// 双击
class DoubleClick extends Component {
  // 是否在进行点击
  isClick = false;
  // 点击次数
  clickNum = 0;

  // 判断点击类型
  getClickCount = () => {
    const { singleClick, doubleClick, params } = this.props;
    this.clickNum++;

    // 毫秒内点击过后阻止执行定时器
    if (this.isClick) {
      return;
    }
    // 毫秒内第一次点击
    this.isClick = true;
    setTimeout(() => {
      // 超过1次都属于双击
      if (this.clickNum > 1) {
        doubleClick && doubleClick(params);
      } else {
        singleClick && singleClick(params);
      }
      this.clickNum = 0;
      this.isClick = false;
    }, 300);
  };

  render() {
    return (
      <div className="double-click" onClick={this.getClickCount}>
        {this.props.children}
      </div>
    );
  }
}

DoubleClick.propTypes = {
  doubleClick: PropTypes.func.isRequired,
  singleClick: PropTypes.func.isRequired,
  params: PropTypes.object,
};

export default DoubleClick;

// 防止双击选中文字
.double-click {
  -webkit-user-select: none;
  -moz-user-select: none;
  -o-user-select: none;
  -ms-user-select: none;
}

2. 通过闭包实现

当我们不需要引入一个组件时，我们可以用过引入一个闭包函数来实现同等效果。该方案我主要用来解决hooks语法中的双击问题

双击单击函数

function onDoubleClick() {
  let isClick = false;
  let clickNum = 0;
  return function ({ singleClick, doubleClick, params }) {
    // 如果没有绑定双击函数，直接执行单击程序
    if (!doubleClick) {
      return singleClick && singleClick(params);
    }
  
    clickNum++;
    // 毫秒内点击过后阻止执行定时器
    if (isClick) {
      return;
    }
    isClick = true;

    setTimeout(() => {
      // 超过1次都属于双击
      if (clickNum > 1) {
        doubleClick && doubleClick(params);
      } else {
        singleClick && singleClick(params);
      }
      clickNum = 0;
      isClick = false;
    }, 300);
  };
}

const onDoubleClickFn = onDoubleClick();

使用案例

  <div 
    onClick={
    () => onDoubleClickFn({
              singleClick: (e) => {
                console.log(e);
              },
              doubleClick: (e) => {
                console.log(e);
              },
              params: 123,
           })
    }
  >
    click
  </div>