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的click documentation:

所建议的那样

在React单张多边形（圆形）上捕获DoubleClick事件

3 个答案: