8 / 8 / 2
Регистрация: 31.01.2014
Сообщений: 472

Как отключить событие фокуса у дочернего элемента?

14.11.2019, 23:19. Показов 4075. Ответов 6
Метки нет (Все метки)

Студворк — интернет-сервис помощи студентам
Как отключить событие фокуса у дочернего элемента?
В коде ниже работает получение фокуса у родительского div и когда он теряется, однако проблема в том, что при клике на дочерний элемент этого div второй раз(например, когда кликнул на textarea, а потом на кнопку "сохранить" или другой внешний элемент) у родителя теряется фокус и событие дочер элемента не срабатывает

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
import {bindEvents} from "../../helpers/functions";
import "./Status.scss";
import * as React from "react";
 
export default class Status extends React.Component {
    constructor(props) {
        super(props);
        this.textInput = React.createRef();
        bindEvents(this, ['write', 'save', 'changeEditMode', 'onEditMode', 'offEditMode']);
    }
 
    write(e) {
        if (e.target.value.length <= 141) this.props.statusProps.writeStatus(e.target.value);
    }
 
    save() {
       this.props.statusProps.saveStatus();
    }
 
    changeEditMode(value) {
        if (this.props.statusProps.checkAccessEdit) this.props.statusProps.changeEditMode(value);
    }
 
    onEditMode() {
        this.changeEditMode(true);
    }
 
    offEditMode() {
        this.changeEditMode(false);
    }
 
    componentDidUpdate(prevProps) {
        if (this.textInput.current) this.textInput.current.focus();
    }
 
    onFocusCapture(ev) {
        console.log(ev.current);
    }
 
    render() {
        let status = this.props.statusProps.status;
 
        if (this.props.statusProps.checkAccessEdit && status.length < 1) status = 'Здесть мог бы быть ваш статус.';
 
        return (
            <div className="status-field" onClick={this.onEditMode} >
                {this.props.statusProps.checkEditMode ?
                    (
                        <div onBlur={this.offEditMode} onFocusCapture = {this.onFocusCapture} ref={this.textInput}>
                            <textarea className="form-control form-control-sm"
                                      type="text"
                                      placeholder="Впишите статус"
                                      onChange={this.write}
                                      value={this.props.statusProps.status}
                                      style={{resize: 'none'}}
                                      tabIndex="-1"
                            />
                            <button tabIndex="-1" className="form-control form-control-sm" onClick={this.save}>Сохранить</button>
                        </div>
                    )
                    :
                    (
                        <div className="status-field-text">
                            {status}
                        </div>
                    )
                }
            </div>
        )
    }
}
0
IT_Exp
Эксперт
34794 / 4073 / 2104
Регистрация: 17.06.2006
Сообщений: 32,602
Блог
14.11.2019, 23:19
Ответы с готовыми решениями:

Создать событие для дочернего элемента tabPage
Граждане-товарищи, обращаюсь к вам вот с какой проблемой: Есть tabControl, есть возможность создавать на нем новые tabPage. Каждая...

Не срабатывает рендер у дочернего элемента дочернего элемента(не тавтология)
Не срабатывает рендер у дочернего элемента дочернего элемента(не тавтология) https://gitlab.com/Kir1/redux.git Ветка two-child При...

Как создать событие потери фокуса для TextField?
Как создать событие потери фокуса для TextField? Хочу проверять содержимое текстового поля не по нажатию enter, а по потери фокуса.

6
27 / 22 / 6
Регистрация: 13.12.2012
Сообщений: 159
15.11.2019, 10:08
Я неочень понял сути проблемы. Отвечая прямо на вопрос - никак. Что вы пытаетесь вообще сделать принципиально?
0
8 / 8 / 2
Регистрация: 31.01.2014
Сообщений: 472
15.11.2019, 10:23  [ТС]
drmedus, я хочу сделать поле статуса профиля как вконтакте, что бы сначала был div со статусом, после клика появлся контейнер с инпутом и кнопкой "сохранить", и что бы если нажал на внешний элемемент, снова появлялся первый div.
0
27 / 22 / 6
Регистрация: 13.12.2012
Сообщений: 159
15.11.2019, 10:40
специально слазил в ВК и посмотрел =) Если я все же верно понял задачу, то это реализуется не через потерю фокуса, а через всплытие клика.
0
8 / 8 / 2
Регистрация: 31.01.2014
Сообщений: 472
15.11.2019, 10:43  [ТС]
drmedus, в смысле на ВСЕ элементы дум поставлено событие клика и во время клика мы смортрим был ли последний элемент частью поля статуса и если да, то скрываем родителя?
0
27 / 22 / 6
Регистрация: 13.12.2012
Сообщений: 159
15.11.2019, 11:44
почему на все? вникните в механизм всплытия.
0
8 / 8 / 2
Регистрация: 31.01.2014
Сообщений: 472
15.11.2019, 13:32  [ТС]
drmedus, я делал прерывание событий по всплытию, но у меня не получилось.
https://jsfiddle.net/BossBossEx/w7ho3b5c/17/
0
Надоела реклама? Зарегистрируйтесь и она исчезнет полностью.
BasicMan
Эксперт
29316 / 5623 / 2384
Регистрация: 17.02.2009
Сообщений: 30,364
Блог
15.11.2019, 13:32
Помогаю со студенческими работами здесь

Как обработать в дбгрид событие изменения фокуса строки?
Мне нужно, чтобы происходили определённые события при изменении фокуса строки любым способом, т.е.: кликом мышки, нажатием клавиши...

Как обработать событие для дочернего окна?
Добрый день! ситуация: Есть основное окно и её оконная функция. так же было создано дочернее окно в качестве класса был указан...

Как отловить событие потери и получения фокуса кнопкой TButton?
Как отловить событие потери и получения фокуса кнопкой TButton? Подозреваю, что нужно обрабатывать сообщения ОС, но какие? Подскажите...

Как в диалоге отловить событие помещения фокуса на какой-нибудь контрол?
Привет всем! А как, собственно говоря, в диалоге отловить событие помещения фокуса на какой-нибудь контрол? Ну т.е. нажали на...

Событие при активации textbox. Или событие при изменения фокуса
Здравствуйте. Подскажите можно ли создать свое событие происходящий вовремя активации textbox. Имеется ввиду создать свой класс...


Искать еще темы с ответами

Или воспользуйтесь поиском по форуму:
7
Ответ Создать тему
Опции темы

Новые блоги и статьи
Валидация и контроль данных табличной части документа перед записью
Maks 22.04.2026
Алгоритм из решения ниже реализован на примере нетипового документа, разработанного в КА2. Задача: контроль и валидация данных табличной части документа перед записью с учетом регламента компании. . .
Отчёт о затраченных материалах за определенный период с макетом печатной формы
Maks 21.04.2026
Отчёт из решения ниже размещён в конфигурации КА2. Задача: разработка отчёта по затраченным материалам за определённый период, с возможностью вывода печатной формы отчёта с шапкой и подвалом. В. . .
Отчёт о спецтехнике находящейся в ремонте
Maks 20.04.2026
Отчёт из решения ниже размещен в конфигурации КА2. Задача: отобразить спецтехнику, которая на данный момент находится в ремонте. Есть нетиповой документ "Заявка на ремонт спецтехники" который. . .
Памятка для бота и "визитка" для читателей "Semantic Universe Layer (Слой семантической вселенной)"
Hrethgir 19.04.2026
Сгенерировано для краткого описания по случаю сборки и компиляции скелета серверного приложения. И пусть после этого скажут, что статьи сгенерированные AI - туфта и не интересно. И это не реклама -. . .
Запрет удаления строк ТЧ документа при определённом условии
Maks 19.04.2026
Алгоритм из решения ниже реализован на примере нетипового документа "Аккумуляторы", разработанного в конфигурации КА2. У данного документа есть ТЧ, в которой в зависимости от прав доступа. . .
Модель заражения группы наркоманов
alhaos 17.04.2026
Условия задачи сформулированы тут Суть: - Группа наркоманов из 10 человек. - Только один инфицирован ВИЧ. - Колются одной иглой. - Колются раз в день. - Колются последовательно через. . .
Мысли в слух. Про "навсегда".
kumehtar 16.04.2026
Подумалось тут, что наверное очень глупо использовать во всяких своих установках понятие "навсегда". Это очень сильное понятие, и я только начинаю понимать край его смысла, не смотря на то что давно. . .
My Business CRM
MaGz GoLd 16.04.2026
Всем привет, недавно возникла потребность создать CRM, для личных нужд. Собственно программа предоставляет из себя базу данных клиентов, в которой можно фиксировать звонки, стадии сделки, а также. . .
КиберФорум - форум программистов, компьютерный форум, программирование
Powered by vBulletin
Copyright ©2000 - 2026, CyberForum.ru