Почему двумя пальцами можно выбрать сразу два элемента меню?

Question

[HelloJesus]

const List = ({ item, edit, updateList, deleteList, handleEdit, handleSubmit, active, title }) => {
      
        const tasksLength = item.tasks.filter(task => task.isCompleted === false).length
        return <>
            {edit ?
                <li className="list" >
                    <InputEdit
                        setUpdateValue={updateList}
                        valueProps={title}
                        item={item} />
                </li>
                : <li className="list" style={active ? { backgroundColor: "rgb(103 194 221)" } : {}}
                    onClick={(evt) => handleSubmit(evt)}>
                    <div className="list__info info-list">
                        <div className="info-list__color" style={{ backgroundColor: item.color.hex }}></div>
                        <h5>{title}</h5>
                        <span>{tasksLength === 0 ? '' : `(${tasksLength})`}</span>
                    </div>
                    <div className="list__icons" style={active ? { opacity: 1 } : {}} >
                        <img className="list__icon"
                            src={iconEdit} alt="iconEdit" onClick={(evt) => handleEdit(evt)} />
                        <img className="list__icon"
                            src={iconDelete} alt="iconDelete" onClick={(evt) => deleteList(evt, item.id)} />
                    </div>
                </li >
            }
        </>
    }

css:

.list {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: auto;
    width: 100%;
    margin-bottom: 15px;
    padding: 5px 5px 5px 5px;
    border-radius: 10px;
    cursor: pointer;
}

.list:hover {
    background-color: rgb(103, 194, 221);
}

.list:hover .list__icons {
    opacity: 1;
}

.list__icons {
    display: flex;
    opacity: 0;
}

.list__icon {
    display: inline;
    width: 19px;
    height: 19px;
    margin-left: 10px;
    cursor: pointer;
}

На элемент li с классом list повешен onClick, который выполняет определенный код:

const handleSubmit = (evt) => {
    setNavigate(item)
    setActiveList(item.id)
}

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

Comments

[Сергей Сергей]

У сенсорных экранов в объекте событий есть массив touches[], в котором перечислены координаты точек касания, можно проверять его на длину.

[HelloJesus]

Сергей Сергей, у меня onClick есть, там нет touch касаний, мне нужно рядом дописать onTouchEnd?

[Сергей Сергей]

Возможно, и в onClick делать проверку на pointerType и отметать касания.
Или придётся костылять с debounce поверх handleSubmit, чтобы обработчик одновременно не вызывался для разных пунктов.