Question

我有一个场景，当我点击div内的输入框时，div功能正在生效。

假设div被选中并且颜色为红色，当我点击所选div内的输入框时，div未被选中（灰色）。

为此我在输入框上使用了$ event.stopPropogation

HTML

<body>
  <div class="container" ng-controller="BaseController">
      <div class="row" ng-click="selectedDiv=!selectedDiv" ng-class="{'colorDiv':selectedDiv}">
          <input placeholder="enter text" ng-mousedown="$event.stopPropagation()">
      </div>
  </div>
</body>

控制器：

 app.controller('BaseController', function($scope) {
  $scope.selectedDiv=true;
});

的CSS：

 .row{
  width:250px;
  height:200px;
  border:1px solid grey;
}
.colorDiv{
  border:1px solid red;
}

DEMO

任何帮助都将不胜感激。

Answer 1

您必须明确停止input框的点击事件传播才能冒泡，因为您可以使用ng-click代替ng-mousedown（mousedown只会在悬停时触发在input框上）。

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

Plunker

Answer 2

您当前的设置在选定状态下开始，当您单击div时，它将变为未选中状态。

app.controller('BaseController', function($scope) {
    $scope.selectedDiv=false;
});

更改$scope.selectedDiv = false;

的起始值

$ event.stopPropogation不起作用

2 个答案: