Событие родительского контейнера перекрывает все дочерние. Как исправить?

Question

[Dr Zhmurge]

Проблемный сайт: kr.pluzhnov.ru
Проблема в блоке "Планировки".
CMS Wordpress
Используется плагин MapSVG.

Html код:

<div id="mapsvg-directory-item-2" class="mapsvg-directory-item selected" data-object-id="2">
<div class="show-descr">
Стоимость продажи: <b>8 500 000 руб.</b><br>
Стоимость аренды: <a href="#arenda" class="arenda">Получить индивидуальное предложение</a>
<div class="divError" id="error"></div>
</div></div>

По ссылке <a href="#arenda" class="arenda"> должно открываться модальное окно, но этого не происходит. Вне этого контейнера все работает как надо. В консоли видно, что при нажатии родительский див добавляет класс, что и прописано в его js ниже. Предполагаю, что событие которое назначено родительскому контейнеру по клику, перекрывает, все дочерние элементы.

JS код родительского контейнера:

MapSVG.DirectoryController.prototype.selectItems = function(ids){
        var _this = this;
        if(typeof ids != 'object')
            ids = [ids];
        ids.forEach(function(id){
            _this.view.find('#mapsvg-directory-item-'+id ).addClass('selected');
        });
    };
    MapSVG.DirectoryController.prototype.deselectItems = function(){
        this.view.find('.mapsvg-directory-item').removeClass('selected');
    };

Как можно исправить? Что почитать? Куда курить?
И верно ли я понимаю симптомы?

Answer 1

[Павел Беляев]

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

Вот пример, не для вас конкретно, а очень обобщенный...

table.onclick = function(event) {
  var target = event.target; // где был клик?

  if (target.tagName != 'TD') return; // не на TD? тогда не интересует

  highlight(target); // подсветить TD
};

Т.е. при клике по таблице видим target, может узнать его класс или тег и среагировать правильно.
Конкретно по вашему случаю, сомневаюсь что кто-то поможет, т.к. задача и заданные обработчики описаны не очень детально.
Попробуйте всё реализовать через родитель, определив в нем по чему тут кликают и что делать с этим, т.е. не выполнять одно действие, а выполнять разные действия в зависимости от того, по чему кликнули.

Comments

[Dr Zhmurge]

Спасибо! Попытаюсь разобраться.