角度 - 检测点击背景div但不在div内

在ollynural.github.io，在投资组合页面我试图模拟一个弹出div给出您点击的项目的更多信息。要退出弹出窗口，我添加了一个ng-click，因此当您点击主要组合弹出容器时，弹出窗口将被删除。角度 - 检测点击背景div但不在div内

是否有可能只显示投资组合弹出div的部分被揭露（不是在照片或描述白色框）删除主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>

$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或代码

来源

2016-05-30 Olly

将'$ event'传递给您的点击事件，并检查'target'是否匹配，或者不要将弹出式容器放在与背景相同的容器中。 – Rob

您可以停止click事件的传播，它包装弹出窗口的内容是这样的元素：

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

这样弹出内点击不会触发losePortfolioFocus()处理程序。

来源

2016-05-30 15:57:08

这工作完美，谢谢！尽管我认为我应该仔细研究事件链并找出它为我自己做的事情。谢谢：） – Olly

我建议你从你的事件'目标检索事件链并检查你的pop-up-container就在那里。这样，您就可以在弹出式窗口中区分点击或从中区分点击。

来源

2016-05-30 15:42:45 LoremIpsum

角度 - 检测点击背景div但不在div内

回答

相关问题