Как направить весь ввод с мыши на определенный элемент c HTML?

Question

Для своего веб-приложения я работаю над всплывающим элементом, который используется для меню и подобных вещей. Я хочу перенаправить весь ввод с помощью мыши на текущей странице на этот всплывающий элемент, когда он виден, однако я могу заставить его работать.

У меня есть элемент плитки, который при наведении курсора мыши показывает изображение (и выделяет плитка). Когда пользователь нажимает на это изображение, отображается всплывающее окно (в виде контекстного меню). Это уже работает. Когда пользователь перемещает мышь за пределы плитки, состояние наведения исчезает, выделение, а также изображение исчезают, чего не должно происходить. Вместо этого я хочу, чтобы визуальное состояние не изменялось, пока отображается меню.

Поэтому я попытался захватить мышь, используя Element.setPointerCapture . Однако для этого требуется идентификатор указателя, которого у меня нет. Я попытался использовать onPointerDown в изображении триггера, но это ничего не дало.

Как правильно реализовать этот захват мыши, чтобы никакое событие мыши не планировалось для любого другого элемента HTML , но всплывающее окно?

Вот что я придумал до сих пор:

private handleTriggerClick = (e: React.MouseEvent): void => {
    console.log("mouse");
    this.props.trigger?.props.onClick?.(e);

    if (this.state.open && this.props.closeOnTriggerClick) {
        this.close();
    } else if (!this.state.open && this.props.openOnTriggerClick) {
        this.open();
        e.currentTarget.setPointerCapture(this.pointerId);
    }
    e.stopPropagation();
};

private handleTriggerPointerDown = (e: React.PointerEvent): void => {
    console.log("pointer");
    this.pointerId = e.pointerId;
};

где trigger - изображение, используемое для отображения всплывающего окна.

I также пытался использовать обработчик перемещения мыши в документе, но это тоже не сработало, вероятно, из-за всплытия событий, когда сначала более глубокие элементы получают событие до того, как оно достигнет документа, поэтому уже слишком поздно, чтобы предотвратить обработку по умолчанию или остановить распространение .

Answer 1

Element.setPointerCapture API будет работать только тогда, когда указатель находится в режиме «активной кнопки» (то есть между указателем вниз и указателем вверх или отмена указателя).

Думаю, это не совсем то, что вы хотите ...

Возможно, requestPointerLock будет ближе к тому, что вы просите, но это также может быть слишком много (появится подтверждающее сообщение -up спрашивает ваших пользователей, могут ли они sh позволить вашему приложению управлять своей мышью et c.)

Таким образом, третий способ, возможно, более простой, - это добавить элемент наложения с фиксированной позицией, который покрыть всю страницу, вы можете сделать так, чтобы оно появилось только тогда, когда ваше меню зависло, но, не видя вашей реальной ситуации, я могу дать только такой общий совет.