onClick срабатывает вторым из-за Hover на телефоне

Question

Компонента:

return < li className={edit ? "task task--bg" : "task"}>
            {edit
                ? <InputEdit
                    setUpdateValue={updateTask}
                    valueProps={item.text}
                    item={item} />
                : <>
                    <div className="task__info info-task">
                        <label className="info-task__checkbox">
                            {isChecked ? <img src={isSuccess} alt="isSuccess" /> : ""}
                            <input id="checkbox" type="checkbox" checked={isChecked || ""} onChange={setCheckedTask} />
                            <span></span>
                        </label>
                        {isChecked
                            ? <p className="info-task__text" style={{ textDecoration: "line-through", color: "#EB5757" }}>{item.text}</p>
                            : <p className="info-task__text" >{item.text}</p>}
                        {withEmpty && <Badge text={item.listTitle} color={item.color} />}
                    </div>
                    <div className="task__icons">
                        <img className="icon--edit" src={iconEdit} alt="iconEdit" onClick={() => setEdit(true)} />
                        <img className="icon--delete" src={iconDelete} alt="iconDelete" onClick={() => deleteTask(item.id)} />
                    </div>
                </>
            }
        </li >

CSS:

.task:hover {
    background-color: #ffffff8b;
    border-radius: 10px;
}

.task__icons img {
    opacity: 0;
}

.task:hover .task__icons img {
    opacity: 1;
}

Checkbox на телефоне не срабатывает с первого раза из-за hover на родителе. Как сделать, чтобы checkbox срабатывал сразу при первом клике на телефоне?

Answer 1

Попробуй вместо события onclick использовать touchstart touchend. Пример с JQuery

$('class').bind('touchstart', function(){
  //some action
});
$('class').bind('touchend', function(){
  //set timeout and action
});

БЛОГ НА HUSL

onClick срабатывает вторым из-за Hover на телефоне

Ответы (1 шт):