Question

似乎AngularJS默认阻止事件传播。 Here is a test on jsfiddle

正如您从上面的链接中看到的，覆盖链接的div会阻止事件传播其下的div，因此点击时链接不起作用。这只是一个测试用例，在实际情况下，div有其他功能，需要在那里，因此删除div不是一种选择。

那么，如何让鼠标点击传播到div下的链接？

代码，以防你不想点击链接，或者链接在遥远的将来某天变成死链接。（并且符合Stack Overflow的规则）

HTML

<div class="container">
  <div class="unrelated">
    <a href="http://stackoverflow.com">Stack overflow
    </a><a href="http://www.goole.com">Google</a>
  </div>
  <div class="scope" ng-app="myApp" ng-controller="testing">
    <div class="half-cover" ng-click="leftShow = false" ng-show="leftShow == true">
      Click to remove one
    </div><div class="half-cover" ng-click="rightShow = false" ng-show="rightShow == true">
      Click to remove one
    </div>
  </div>
</div>

的Javascript

var myApp = angular.module('myApp',[]);

myApp.controller('testing', ['$scope', MyCtrlFunction]);
function MyCtrlFunction($scope) {
    $scope.leftShow = true;
    $scope.rightShow = true;
}

CSS

.container {
  position: relative;
  height: 300px;
  width: 500px;
  background-color: white;
}
.unrelated {
  position: absolute;
  width: 100%;
  height: 100%;
}
.unrelated a{
  display: inline-block;
  width: 50%;
  height: 100%;
  line-height: 300px;
  text-align: center;
}
.scope {
  position: absolute;
  left: 0;
  top: 0;
  height: 100%;
  width: 100%;
  z-index: 1000;
}
.half-cover {
  display: inline-block;
  height: 100%;
  width: 50%;
  background-color: black;
  color: white;
  line-height: 300px;
  text-align: center;
}

Answer 1

我不确定，这是一个非常混乱的例子，但问题不在于传播

您隐藏身边的问题，但.scope仍覆盖高度100％;

所以我做了以下事情：

HTML

 <div class="container" ng-app="myApp">
  <div class="unrelated">
    <a href="http://stackoverflow.com">Stack overflow
    </a><a href="http://www.goole.com">Google</a>
  </div>
  <div ng-controller="testing">
    <div class="scope {{ checkShow() }}" >
       <div class="half-cover" ng-click="leftShow = false" ng-show="leftShow == true">
         Click to remove one
        </div><div class="half-cover" ng-click="rightShow = false" ng-show="rightShow == true">
      Click to remove one
    </div>
  </div>
</div>
</div>

JS

$scope.checkShow = function(){
   if($scope.leftShow == false && $scope.rightShow == false) {
       return 'hidden-scope';
   } else {
      return ''
   }
}

这真的让人感到困惑，因为ng-if在某种程度上无法正常工作，当我尝试{{rightShow && leftShow ? '' : '.hidden-scope'}}时奇怪的插值错误，所以我决定用$scope.checkShow结束它

CSS

.hidden-scope {
   height: 0;
}

JSFiddle demo

Answer 2

这不是关于事件传播的问题.. div（具有scope类和ng-controller的那个）是unrelated类的div上的强加因为 z-index: 1000 。

您可以访问以下内容的一种（简单）方法是减少z-index。所以，应用ng-class为我们做这件事。 这可以是任何条件或功能。

ng-class="{'hideit': !leftShow && !rightShow}"

其中，

div.hideit {
  z-index: -1
}

forked working fiddle

如何在AngularJS中允许事件传播？

2 个答案: