Реагировать: Предотвратить щелчок правой кнопкой мыши на фокусировке элемента - PullRequest
Новая
       9

Реагировать: Предотвратить щелчок правой кнопкой мыши на фокусировке элемента

0 голосов
/ 18 марта 2020

Я знаю, что это кажется простым, и первым побуждением будет предложить что-то вроде preventDefault в событии mousedown. Это не то, чем является этот вопрос.

В React я просто хочу получить input, когда Left Clicked получает свой фокус как обычно, а когда Right Clicked не получает фокус.

Я не могу найти никакой комбинации обработчиков событий или манипуляций с событиями, которая позволила бы это (по крайней мере, в chrome). У меня возникает соблазн поместить обработчики событий за пределы React DOM и провести операцию с отключением на более высоком уровне в фазе захвата до того, как в нее вступит реакция, но я просто надеюсь, что что-то упустил, и кто-то увидит что-то очевидное, чего мне не хватает .

Вот различные комбинации «всего», что я бросил в него. Syntheti c стандартное предотвращение событий, предотвращение nativeEvent, каждая вариация захвата и пузырьковая фаза и т. Д. c. Событие со всеми описанными ниже обработчиками событий. Я могу запретить фокусировку щелчка левой кнопкой мыши, но щелчок правой кнопкой мыши устанавливает фокус на входе. 

//React v16.12.0
function killEvent (e: React.SomeEvent<HTMLInputElement>): void {
    e.nativeEvent.stopImmediatePropagation();
    e.nativeEvent.preventDefault();
    //[Neither above nor below seems to work]
    e.preventDefault();
    e.stopPropagation();
}

<input
    onContextMenuCapture={killEvent}
    onContextMenu={killEvent}
    onClick={killEvent}
    onClickCapture={killEvent}
    onAuxClick={killEvent}
    onAuxClickCapture={killEvent}
    onPointerDown={killEvent}
    onPointerDownCapture={killEvent}
    onMouseDownCapture={killEvent}
    onMouseDown={killEvent}
    onFocusCapture={killEvent}
    onFocus={killEvent}
/>

1 Ответ

0 голосов
/ 18 марта 2020

вот мое решение

Захват при нажатии мыши 

 <input onMouseDown={this.killEvent} />

, затем проверьте, какая кнопка нажата 

 killEvent = e => {
    if (e.nativeEvent.which === 3) {
      e.nativeEvent.preventDefault();
    }
  };
...