Когда hovered блока влияет на состояние hovered внутренного блока. События в js

Записал видео что бы было понятно. https://yadi.sk/i/OWFoBa18cP3j4

Это два самостоятельных блока, но в одном состоянии блока more может использоваться блок button над которым хочется производить какие то действия в зависимости от состояния блока родителя. Сейчас есть баг, он заключается в том что, когда нет hover на button то соответственно модификатор этого блока убирается. Но остается hover на блоке родителе more который должен транслировать этот hover на внутренний блок button

Как сделать правильно, что бы было ожидаемое поведение? Не хочу через стили.

Написал такой код:

modules.define('more', ['i-bem__dom', 'control'], function(provide, BEMDOM, Control) {

provide(BEMDOM.decl({ block : this.name, modName : 'type', modVal: 'link', baseBlock : Control }, {
    onSetMod : {
        'js' : {
            'inited' : function() {
                this._button = this.findBlockInside('button');
            }
        },
        'hovered' : {
            'true' : function() {
                this.__base.apply(this, arguments);
                this._button.setMod('hovered');
            },
            '' : function() {
                this.__base.apply(this, arguments);
                this._button.delMod('hovered');
            }
        }
    }
}));

});

10 years ago

tadatuta

Конкретно данный код можно улучшить в 2 местах:

Применить live-инициализацию.
Написать общий обработчик на hovered:

{
    hovered: function(modName, modVal) {
        this.__base.apply(this, arguments);
        this._button.setMod(modName, modVal);
    }
}

А уж насколько правильно само желание эмулировать состояние hovered — решать тебе. Как по мне, контрол на видео — это единый блок, у которого необходимая визуальная реакция должна задаваться просто через

.button_type_more:hovered .button__arrow {}

10 years ago

voischev

@tadatuta на видео не видно, но в дизайне это очень самостоятельных блока. И в одном из состояний more есть button

Не совсем понял

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

10 years ago

tadatuta

live применить, чтобы блок инициализировался не в момент загрузки страницы, а в ответ на наведение мыши.
это реакция на изменение модификатора hovered в любое значение (скобку добавил).

10 years ago

voischev

это реакция на изменение модификатора hovered в любое значение (скобку добавил).

@tadatuta что-то не работает как ожидается ((( всеравно когда мышка выходит за button внутри more с button убирается модификатор hovered

10 years ago

tadatuta

@voischev я неправильно прочитал твой исходный вопрос :( изменения, которые предложил никак не меняют логику твоего исходного кода, только лишь чуть-чуть экономят на отложенной инициализации и строчках кода.

Умозрительно, происходит следущющее:

Мышь попадает в more, твой код выставляет _hovered на button.
Мышь попадает на button, внутри уже благодаря коду button происходит попытка снова выставить _hovered, для пользователя все ок.
Мышь выходит из button, обработчик удаляет _hovered.

Чтобы этого не происходило, ты можешь выставлять для button внутри more некий модификатор, в котором отписываться от исходной реакции на ховер (она реализована в https://github.com/bem/bem-components/blob/v2/desktop.blocks/control/control.js#L16-L33)

Чтобы оставлять комментарии, необходимо авторизоваться.