角度 - 檢測點擊背景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內

回答

相關問題