防止点击div到底层

Question

我想防止在ng-repeat内的href上方单击覆盖按钮（div），这是重复的操作，其顶部的收藏夹删除按钮

<div style="margin-top:110px;" id="favoritecdlist" ng-controller="UserController">
     <div class="cdscrollcontainer" ng-repeat="cd in favoriteCds">
            <a href="~/cd/{{cd.id_cd}}" class="cdscrollcell" id="{{cd.id_program}}">
              <div class="favorite-delete" ng-click="RemoveCDFromFavoriteList(cd.id_cd)">x</div>
                 <img class="cdimage" ng-src="{{cd.url}}">
                 <div class="cdimagebackground">
                 <div class="cdtitle">{{cd.cdName}} ({{cd.ReleaseYear}})</div>
              </div>
            </a>
     </div>
</div>

这是从列表中删除收藏夹的控制器部分，我首先进行淡出（1秒），然后触发实际的Web服务以将其从数据库中删除。

$scope.RemoveCDFromFavoriteList = function (id_cd) {
        $('#' + id_cd + '').css("opacity", "0").css("transition-duration", "1s");

            $http({
                method: 'get',
                url: "/User/RemoveUserFavoriteCD?id_cd=" + id_cd,
            })
                .success(function (data) {
                    $('#' + id_cd + '').css('display', 'none');
                }).error(function (data) {
                    $scope.message = 'Unexpected Error';
                });
}

问题是，当我单击“收藏夹删除”时，实际上是从列表中删除了该图像，但它却从数据库中删除了该图像，但是在加载了包含CD详细信息的页面之后，就将其删除了。 我如何防止这种情况发生，我尝试了stoppropagation和preventdefault，但似乎无法使其正常运行，以及使用指令也无法使其正常工作。 我需要做什么才能使其正常工作？

我尝试将以下内容添加到userController.js

    $(document).ready(function(){
        $('favorite-delete').on('click', function(event){
            event.preventDefault();
        })
    })

但也没有运气Href链接仍然加载，我需要两者

Answer 1

好的，为了使其工作，我必须添加$ event.stopPropagation（）; 和ng-click中的$ event.preventDefault（）使其最终变成了这个样子，感谢@WrkOnMyMachine的帮助，我朝着正确的方向发展（哦，完全忽略了$（document）.ready ..... 。）这是工作版本。

<div style="margin-top:110px;" id="favoritecdlist" ng-controller="UserController">
 <div class="cdscrollcontainer" ng-repeat="cd in favoriteCds">
        <a href="~/cd/{{cd.id_cd}}" class="cdscrollcell" id="{{cd.id_program}}">
          <div class="favorite-delete" ng-click="RemoveCDFromFavoriteList(cd.id_cd); $event.stopPropagation(); $event.preventDefault()">x</div>
             <img class="cdimage" ng-src="{{cd.url}}">
             <div class="cdimagebackground">
             <div class="cdtitle">{{cd.cdName}} ({{cd.ReleaseYear}})</div>
          </div>
        </a>
 </div>