防止點擊div到底層<a href

-1

我想防止點擊位於ng-repeat內部的href頂部的覆蓋按鈕（div），這是使用favorite-delete的neg重複上的防止點擊div到底層<a href

<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並防止默認，但似乎無法得到它的工作，以及使用指令，無法讓它工作。我需要做些什麼才能使其發揮作用？

我嘗試了以下內容添加到userController.js

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

也沒有運氣的HREF鏈接仍然加載，爲了得到它的工作，我不得不我需要同時

來源

2017-01-10 Ewald Bos

在你想留可點擊元素的NG-點擊指令，加$ event.stopPropagation（）; 'ng-click =「RemoveCDFromFavoriteList（cd.id_cd）; $ event.stopPropagation（）;」' 出於好奇，如果你不想讓錨元素做任何事情，爲什麼它在那裏？如果您升級Angular，您還需要重新訪問您的$ http分辨率。 Angular 1.6有一些重大更改，並且不再有用於解決承諾的.success（）方法。你現在必須使用.then（）像一個普通的Promise – WrksOnMyMachine

嗨，我嘗試了ng-click內的「$ event.stop ...」，但它不起作用，頁面仍然被加載。你對錨元素意味着什麼？ –

OK添加$ event.stopPropagation（）;和$ event.preventDefault（）在ng-click，所以它終於成爲這個，感謝@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>

來源

2017-01-10 16:22:17

防止點擊div到底層<a href

回答

相關問題