2017-02-23 98 views
-1

У меня есть элемент, как на изображении ниже

enter image description hereНажмите событие не срабатывают для второго элемента над другим DIV

1: нажмите, чтобы открыть страницу с деталями
2: нажмите для переключения состояния пункт (истина/ложь) и остаться на этой странице

элемент 2 позиции: абсолютный и выше элемента 1
При нажатии на элемент 2, нажмите кнопку запуска событий на элемент 1 и страница перенаправления подробно страницы, ни одно событие не стрельбы для элемента 2.

Вот мой де 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; }); 
    } 
+2

Просьба указать HTML и текущий код, который не работает для вас. Лучше всего, если вы можете добавить фрагмент рабочего кода, чтобы продемонстрировать проблему. См. ► [Как создать минимальный, полный и проверяемый пример] (http://stackoverflow.com/help/mcve) – Nope

+0

Любой код будет оценен. –

+0

Извините, у меня есть обновленный код. – dangquang1020

ответ

0

ng-click будет прослушивать все события щелчка внутри элемента и всех дочерних элементов.

Чтобы предотвратить нахождение внешнего слоя кликом, вам необходимо остановить распространение клика.

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

Можете ли вы предоставить 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/

0

Это может быть проблемой связанные с Event Bubbling. Когда событие инициируется на элементе, все его родительские элементы также запускают это событие. Событие рождает родительский родитель. Вам необходимо остановить распространение события на самом низком уровне.

Для этого вы должны получить сгенерированное событие щелчка, разрешив его угловой передать его функции.

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

В самой функции вы должны принять событие и прекратить его распространение.

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

Это позволит предотвратить событие от бурлит и, таким образом, предотвратить вашу open функцию от того срабатывает.

Смежные вопросы