Угловой - обнаружение щелчка фонового элемента, но не по элементам внутри

Question

Угловой - обнаружение щелчка фонового элемента, но не по элементам внутри

0

На ollynural.github.io, на странице портфолио, я пытаюсь смоделировать всплывающий div, дающий больше информации о проекте, на который вы нажали. Чтобы вернуться всплывающее окно, я добавил ng-click, поэтому, когда вы нажимаете на основной контейнер с раскрывающимся портфелем, всплывающее окно удаляется.

Возможно ли иметь только отдельные части раскрывающегося списка портфолио (не на фотографии или в белой коробке описания), удалив главный div после щелчка? Таким образом, вы можете свободно щелкнуть по изображению и белый квадрат

<div class="portfolio-pop-up container" ng-click="losePortfolioFocus()">
            <div class="row">
                <div class="col-xs-12">
                    <img class="portfolio-image portfolio-image-popup" src="{{portfolioImageClass}}">
                </div>
                <div class="col-xs-12 pop-up-container">
                    <div class="pop-up-row">
                        <div class="col-xs-9" style="background: red">
                            <h1>
                                {{portfolioTitle}}
                            </h1>
                            <p>
                                {{portfolioDescription}}
                            </p>
                        </div>
                        <div class="col-xs-3" style="background: cyan">
                             <a href="{{portfolioLink}}">Click me</a>
                             <div ng-repeat="tech in portfolioTech">
                                {{tech}}
                             </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

JS

$scope.losePortfolioFocus= function() {
    angular.element('.portfolio-pop-up').css("display", "none");
}

CSS

.portfolio-pop-up {
    display: none;
    position: absolute;
    width: 100%;
    height: 100%;
    /* color with alpha transparency */
    background-color: rgba(0, 0, 0, 0.70);
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
}

Любая помощь будет оценена, может при необходимости добавить больше css или кода

Olly 30 май 2016, в 17:34

Источник

0

Передайте $event в ваше событие click и проверьте соответствие target или не помещайте ваш всплывающий контейнер в тот же контейнер, что и фон.
Rob 30 май 2016, в 15:44

Теги:

javascript

angularjs

css

2 ответа

0

Я предлагаю вам просканировать цепочку событий из целевого объекта и проверить, находится ли ваш pop-up-container. Таким образом, у вас будет возможность различить щелчок по всплывающему окну или из него.

LoremIpsum 30 май 2016, в 14:09

Ещё вопросы

Передайте $event в ваше событие click и проверьте соответствие target или не помещайте ваш всплывающий контейнер в тот же контейнер, что и фон.

Alec Kravets · Accepted Answer · 2016-05-30T13-21-00.000Z

Вы можете остановить распространение события click на элементе, который обертывает всплывающее содержимое следующим образом:

<div class="portfolio-pop-up container" ng-click="losePortfolioFocus()">
  <div class="row" ng-click="$event.stopPropagation()">
  ...
  </div> 
</div>

Таким образом, клики внутри всплывающего окна не будут вызывать обработчик losePortfolioFocus().

Это сработало отлично, спасибо! Хотя я думаю, что мне следует изучить цепочку событий и понять, что она делает для себя. Спасибо :)