возможно событие всплыло на неверном элементе в пользовательской директиве

Question

Моя цель - щелкнуть мышью простым элементом на странице.Работает но не на каждом клике.Я должен щелкнуть несколько раз в разных местах поперек плитки, а затем перевернуть плитку.Код выполняется, как я вижу в консоли, но похоже, что щелчок по неправильным элементам срабатывает.

У меня есть пользовательская директива с методом ссылки:

link: function (scope, element, attrs) {
            scope.hideClicked = true;
            scope.showClicked = false;

            scope.backClicked = function () {
                console.log('show front')
                scope.hideClicked = false;
                scope.showClicked = true;
            }

            scope.frontClicked = function () {
                console.log('hide front');
                scope.hideClicked = true;
                scope.showClicked = false;
            }
        console.log(scope, element, attrs);
    }

и в шаблоне

<div class="tile" ng-class="{'hide-elem': hideClicked,'show-elem': showClicked }"> 
    <span class="front" ng-click="frontClicked()">{{itemData.value}}</span> 
    <span class="back" ng-click="backClicked();"></span> 
</div>

Полный код для воспроизведения находится здесь: https://codepen.io/lkurylo/pen/Laprjx

Answer 1

Оба дочерних- span -элемента используют абсолютное позиционирование, поэтому кажется, что браузер решает, что второй элемент отображается "поверх" первого.В результате щелчок регистрируется только на элементе back, который является верхним элементом.

Я предлагаю вам отображать только один элемент в любой момент времени, например, добавив ng-show илиng-if на оба элемента.

<span class="front" ng-if="showClicked" ng-click="..."></span>
<span class="back" ng-if="hideClicked" ng-click="..."></span>