Как можно удалить обработчик события, если в качестве аргумента addEventListener передается функция с аргументами?

Question

[andrey_chirkin]

Добрый день! У меня такая проблема, мне необходимо передать аргумент в обработчик события. Но затем при другом событии нужно нужно этот обработчик удалить. Не могу понять, как это сделать. Пример:

const but1 = useRef(null)
    const but2 = useRef(null)

    const handleButtonMove = () => (
        (event) => {
            console.log(event.target)
        }
    )


    const handleButtonClick = (elBut1) => (
        (event) => {
            elBut1.removeEventListener("mousemove", handleButtonMove())
        }
    )

    useEffect(() => {
        const elBut1 = but1.current
        const elBut2 = but2.current
        elBut1.addEventListener("mousemove", handleButtonMove())
        elBut2.addEventListener("click", handleButtonClick(elBut1))
    }, [])

return (
        <div className="operationTable">
            <button ref={but1}>Button 1</button>
            <button ref={but2}>Button 1</button>
        </div>
    )

Comments

[insighter]

зачем вам такая зубодробительная логика с отключением событий? почему нельзя просто блокировать выполнение кода внутри обработчика?

(e) => {
  if (handlerNotBlocked){
            console.log(event.target)
  }
}

Может код не весь, но вы отписываетесь от событий на которые повесились в useEffect?

[andrey_chirkin]

insighter, У меня это встречается в следующей задаче. Есть таблица, в которой размер столбцов должен менять динамически, когда растягиваем столбец. Используется три события мыши: mousedown, mousemove(когда мы тянем столбец, при зажатой мыши), mouseUp. При mouseUp мне нужно удалить событие mouseMove.

const onMouseUpRightResize = (id) => (
        () => {
            document.removeEventListener("mousemove", onMouseMoveRightResize(id))
        }
    )

    const onMouseMoveRightResize = (id) => (
        (event) => {
            const dx = event.clientX - x
            x = event.clientX
            width = width + dx
            setColWidth({...colWidth, [id]: width})
            console.log('width =', width)
            document.addEventListener("mouseup", onMouseUpRightResize(id))
        }
    )


    const onMouseDownRightResize = (event) => {
        x = event.clientX
        const {id} = event.target
        console.log('Default width =', width)
        document.addEventListener("mousemove", onMouseMoveRightResize(id))

    }

[insighter]

andrey_chirkin, и почему нельзя сразу на все три события подписаться?

[andrey_chirkin]

insighter, https://jsfiddle.net/pe4uaogw/4/

Answer 1

[insighter]

const handleButtonClick = (elBut1) => (
        (event) => {
            elBut1.removeEventListener("mousemove", handleButtonMove())
        }
    )

const handleElBut1Click = handleButtonClick(elBut1);

elBut2.addEventListener("click", handleElBut1Click)
elBut2.removeEventListener("click", handleElBut1Click)

Comments

[andrey_chirkin]

Спасибо!