反应小叶多边形上的双击事件（圆圈）

Question

我可以抓住单击事件

<Circle onClick={ (event) => this.seatClickHandler(event, seat) } ... />

但我想抓住双击事件，这是react-leaflet可能

我在双击时禁用了zoom-in地图，所以如果地图有事件，那么多边形应该是可用的吗？

Answer 1

我不得不绕过一些DOM的限制。

我曾经检查过某些元素是否在短时间内被点击了两次

/**
 * Number of clicks.
 * 
 * @type {Number}
 */
let seatClickNumber;

/**
 * Id of element
 * 
 * @type {Number}
 */
let clickedSeatId;

/**
 * Last timeout ID
 * 
 * @type {Number}
 */
let timeoutId;

/**
 * Checks if seat is double clicked.
 * 
 * @param {Object} seat
 * 
 * @returns {boolean}
 */
isDoubleClick = (seat) => {
   if (clickedSeatId === seat['seatLabelId']) {
        seatClickNumber = seatClickNumber + 1;
    }

    clickedSeatId = seat['seatLabelId'];

    clearTimeout(timeoutId);
    timeoutId = setTimeout(() => {
        clickedSeatId = '';
        seatClickNumber = 1;
    }, 600);

    return seatClickNumber > 1;
};

/**
 * Selects one seat by click event or multiple by holding ctrl key whn clicking.
 *
 * @param {Object} event
 * @param {Object} seat
 */
seatClickHandler = (event, seat) =>
{
    if(this.isDoubleClick(seat)) {
        alert('Double Click!!!');
    }

    let index = this.props.selectedSeats.indexOf(seat);

    if (index !== -1) {
        this.props.deselectSeat(seat);
    } else {
        event.originalEvent.ctrlKey ? this.props.addSelectedSeats(seat) : this.props.setSelectedSeats(seat);
    }
};

Answer 2

基于rxJS的解决方案在构造函数或init函数中使用它：

const clickEvents = Rx.Observable.fromEvent(document.getElementById('yourId'), 'click');

const unsubscribe$= Rx.Subject()


clickEvents
  .buffer(clickEvents.debounce(300))
  .map(list => list.length)
  .filter(x => x === 2)
  .takeUntil(unsubscribe$)
  .subscribe(() => {
      console.log('you can handle the double click here');
  })

每当你想要杀死对事件的订阅

你调用一个使用的函数

 unsubscribe$.next()
 unsubscribe$.complete()

Answer 3

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

这不是React的限制，它是DOM的click和dblclick事件的限制。 正如Quirksmode的点击文档所示：