反應小葉多邊形上的雙擊事件（圓圈）

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的點擊文檔所示：