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>

可能事件在自定义指令中的错误元素上冒泡

1 个答案: