Question

我想要做的是：使用css为cursor:no-drop;做这个，很好，但问题是当我点击图标时我仍然得到点击。

如果您看到我的图标变为红色，我通过 css 插入了cursor:no-drop;。对于用户无法点击，但仍然点击仍然可以解决这个问题？当图标变为红色时阻止点击？

谢谢。

html + angular

<div ng-app>
  <div ng-class="{'selected-gamepad':tog==1}">
    <br>
    <i class="fa fa-lg fa-gamepad" ng-class="{'gamepad-blue': iTog1}" 

    ng-click="iTog1 = !iTog1"></i>
    <span id='1' ng-click='tog=1; iTog1 = false;'>span 1</span>
  </div>

  <div ng-class="{'selected-gamepad':tog==2}">
    <br>
    <i class="fa fa-lg fa-gamepad"  ng-class="{'gamepad-blue': iTog2}" ng-click="iTog2 = !iTog2"></i>
    <span id='2' ng-click='tog=2; iTog2 = false;'>span 2</span>
  </div>
</div>

的CSS：

.selected-gamepad > span {
  border: dotted pink 3px;
}

.selected-gamepad > i {
   color: red;
   cursor:no-drop;
}

.gamepad-blue,
.selected-gamepad .gamepad-blue{
  color: blue;
}

jsfiddle：http://jsfiddle.net/zvLvg/290/

Answer 1

更改CSS中的cursor属性并不会神奇地禁用单击 - 它只是更改光标，使其看起来无法单击。如果要禁用单击，则代码中需要一些额外的逻辑。

我编写了一些代码来清理它并将一些逻辑移到控制器上。代码当然可以更好，但是我把它留给你 - 尝试阅读一些关于它的教程并熟悉更清晰的Angular语法来编写更好的代码： - ）。

回到问题 - 当你选择打击垫时，你真正需要做的是阻止玩家点击。我通过在if函数中添加toggle语句进行简单检查来完成它：

查看：

<div ng-app="app"> <div ng-controller="GameController as vm"> <div ng-class="{'selected-gamepad':vm.tog==1}"> <br> <i class="fa fa-lg fa-gamepad" ng-class="{'gamepad-blue': vm.iTogs[1]}" ng-click="vm.toggle(1)"></i> <span id='1' ng-click='vm.selectPad(1)'>span 1</span> </div> <div ng-class="{'selected-gamepad':vm.tog==2}"> <br> <i class="fa fa-lg fa-gamepad" ng-class="{'gamepad-blue': vm.iTogs[2]}" ng-click="vm.toggle(2)"></i> <span id='2' ng-click='vm.selectPad(2)'>span 2</span> </div> </div> </div>

<强>逻辑：

<script> // Register module angular.module('app', []); // Create controller angular.module('app') .controller('GameController', function() { var self = this; self.tog = null; self.iTogs = [false, false]; self.toggle = function(index) { if (self.tog != index) { self.iTogs[index] = !self.iTogs[index]; } } self.selectPad = function(index) { self.tog = index; self.iTogs[index] = false; } }); </script>

这是工作人员：

http://jsfiddle.net/zvLvg/291/

一点解释

我所做的是将一些逻辑移到控制器上。控制器允许您将应用程序中的不同部分分开，并对它们进行更多控制。此外，当您在指令中使用函数而不是直接表达式时，代码会更清晰（就像您之前使用ng-click所做的那样）。

我还创建了一个数组，而不是用数字命名变量。进一步的改进是使用ng-repeat来避免代码重复 - 填充列表中的div几乎相同，可以用一个div和ng-repeat代替。此外，这些属性的名称可能会更好 - 现在他们并没有真正说出它们的含义。

我希望这些小技巧可以帮助您更好地使用Angular和编程。： - ）

Angular.js如何应用游标：在css类中不丢弃

1 个答案: