Click事件不會觸發第二個元素上方的另一格

-1

1的圖像中的項目：點擊進入詳細信息頁面
2：單擊切換項狀態（真/假）和留在此頁面

元件2的位置是：絕對和上述元件1
當我點擊元件2上，點擊事件觸發元件1上，並在頁面重定向到細節頁面，沒有事件燒成元件2

這是我的des IGN和後面的代碼：

<div class="investment-content_image" ng-click="open(item.id)"> 
     <div class="closed-overlay-fra"> 
      <img class="closed-photo" ng-src="{{item.getClosedImage()}}" /> 
     </div> 
     <div class="investment-content-closed" ng-if="!item.open" ng-class="{'active': hovering}" ng-click="open(item.id)"> 
      <span class="investment-content-closed-text">SOLD OUT</span> 
     </div> 
     <label class="toggle-switch" ng-if="user.isAdvisor()" ng-click="updateHideInvestment()"> 
      <input type="checkbox" ng-model="item.hide_investor"> 
      <div class="switch-slider"> 
       <span class="glyphicon glyphicon-ok"></span> 
       <span class="glyphicon glyphicon-remove"></span> 
      </div> 
     </label> 
    </div> 


$scope.open = function (id) { 
     if (!$scope.user) { 
      return; 
     } 
     if ($scope.user.isAdmin()) { 
      $state.go('admin.showInvestment.overview', {investmentId: id}); 
     } else if ($scope.user.isInvestor()) { 
      $state.go('investor.showInvestment.overview', {investmentId: id}); 
     } else if ($scope.user.isAdvisor()) { 
      $state.go('advisor.showInvestment.overview', {investmentId: id}); 
     } 
    }; 

$scope.updateHideInvestment = function() { 
     let data = { 
      id: $scope.item.id, 
      hide: $scope.item.hide_investor 
     }; 

     advisorsSvc.updateHideInvestment(data) 
      .then((result) => { 
       $scope.item.hide_investor = result.hide_investor; 
      }) 
      .catch((err) => { throw err; }); 
    }

來源

2017-02-23 dangquang1020

請提供不適合您的HTML和當前代碼。最好的，如果你可以添加一個工作代碼片段來演示問題。請參閱►[如何創建最小，完整和可驗證的示例]（http://stackoverflow.com/help/mcve） – Nope

任何代碼將不勝感激。 –

對不起，我更新了代碼。 – dangquang1020

ng-click會聽裏面的元素所有點擊事件和所有子元素。

爲了防止外層獲得點擊，您需要停止點擊傳播。

ng-click="$event.stopPropagation(); open(item.id)"

來源

2017-02-23 11:29:06 Icycool

你能提供css嗎？這裏使用JQuery

簡化版

HTML：

<div id="first"></div> 
<div id="second"></div>

CSS：

#first 
{ 
    position:absolute; 
    background-color:red; 
    width:300px; 
    height:300px; 
} 

#second 
{ 
    position:absolute; 
    margin-left:200px; 
    margin-top:200px; 
    background-color:green; 
    width:50px; 
    height:50px; 
}

的JavaScript：

$("#first").click(function() 
{ 
    alert("first"); 
}); 

$("#second").click(function() 
{ 
    alert("second"); 
});

https://jsfiddle.net/maximelian/mkgmL83r/

來源

2017-02-23 11:31:09 maximelian1986

這可能是一個問題與事件冒泡有關。當元素觸發事件時，其所有父元素也將觸發此事件。父母之後，事件正在冒起父母。您需要停止最低級別的事件傳播。

爲此，您必須通過讓角度傳遞給您的函數來獲得生成的點擊事件。

<label class="toggle-switch" ng-if="user.isAdvisor()" ng-click="updateHideInvestment($event)">

在函數本身中，您必須採取事件並停止其傳播。

$scope.updateHideInvestment = function (event) { 
    event.stopPropagation() 
    // Rest of your code here 
}

這將阻止事件冒泡，從而防止您的open功能被觸發。

來源

2017-02-23 11:35:40 gerrit

Click事件不會觸發第二個元素上方的另一格

回答

相關問題