Как исправить двойной вызов модального окна в bootstrap 4?

Question

[Виталий Хван]

Имеются 2 стандартных модальных окна bootstrap
А так же компонент под типу Card, суть в том что при нажатии на саму карточку должно вызываться одно модальное окно, а при нажатии на кнопку внутри этой карточки вызываться второе. Проблема в том что если нажать на кнопку, вызовутся оба.
У самой карточки прописан data-toggle и data-target
так же и у кнопки
Пример элемента Card


Преположительно это происходит из за области видимости, но по идее должен же обработчик понимать что нажата была активная область внутри, т.к. firefox показывает в devtools event на самой карточке

<li class="planer-grid-item animated flipInY" data-toggle="modal" data-target="#planer">
    <div class="item-image">
        <img src="/static/plans/1rooms_plan.svg"
             alt="">
    </div>
    <div class="item-description">
        <div class="description-inner rooms">
            <div class="roomValue value">
                <?= mt_rand(1, 4) ?>
            </div>
            <div class="title">
                dsadas
            </div>
        </div>
        <div class="description-separator"></div>
        <div class="description-inner square">
            <div class="value">
                <?= mt_rand(50.0, 120.0) ?> м<sup>2</sup>
            </div>
            <div class="title">
                dsadsa
            </div>
        </div>
    </div>
    <div class="item-button">
        <a href="#" class="btn btn-light btn-call-phone" data-toggle="modal" data-target="#contact-modal">Button
        </a>
    </div>
</li>

Пример на fiddle

Answer 1

[Виталий Хван]

Решение проблемы такое.
В JS имеет место быть распространение события на дочерние элементы.
Поэтому вместо data-toggle="modal", я принял решение использовать JS код и с помощью стандартной функции .modal('show') отображать модальные окна, а так же дочернему элемету card на вызов модального окна добавить функцию события
e.stopPropagation();
Что в свою очередь и решило проблему