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

似乎AngularJS默认可以防止事件传播。 Here is a test on jsfiddle。如何在AngularJS中允许事件传播？

从上面的链接可以看出，覆盖链接的div可以防止事件在其下传播div，所以点击链接时链接不工作。这只是一个测试案例，在真实情况下，div得到了其他功能，需要在那里，所以删除div不是一个选项。

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

代码万一你不想点击链接，或者链接在未来的某一天变成死链接。（而且，以适应堆栈溢出的规则）

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; 
}

来源

2017-04-26 cytsunny

我不知道，这是非常令人困惑的例子，但问题与传播无关

问题是你隐藏你的身体，但你的.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>

$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

来源

2017-04-26 09:58:32 Leguest

这不是关于事件传播史的问题..你div（具有scope类和ng-controller）是超级强加在分度，因为z-index: 1000unrelated类。

您可以通过减少z-index来访问以下内容的（简单）方式之一。所以，申请一个ng-class它为我们做。 这可以是任何条件或功能。

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

其中，

div.hideit { 
    z-index: -1 
}

forked working fiddle

来源

2017-04-26 10:00:48 tanmay

正如我所提到的，在div在我的实际情况了功能。虽然你没有删除它，但是由于div失去了覆盖'div'的功能，所以使用'z-index：-1'也不好。 – cytsunny

@cytsunny您无法访问它下面的内容。你也可以通过使用'ng-class'类似的方法轻松地覆盖div – tanmay

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

回答

相关问题