在反应传单多边形（圆形）上捕获双击事件

Question

我可以捕捉到单击事件

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

但我还想捕获双击事件，这在 react-leaflet

中是否可行

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

Answer 1

不要在同一元素上注册 click 和 dblclick 事件：无法区分单击事件和导致 dblclick 事件的单击事件。

这不是 React 的限制，这是 DOM 的 click 和 dblclick 事件的限制。正如 Quirksmode 的 click documentation:

所建议的

Answer 2

我不得不绕过一些 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 3

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

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()

在反应传单多边形（圆形）上捕获双击事件

Catch Double Click event on react leaflet polygon (circle)

javascript

leaflet

react-leaflet