<a>盡管有 $event.stopPropagation，但在標記</a>內部單擊時會發生重定向

Question

模板：

<a href="https://example.com/" target="_blank">
  Documentation <i ng-click="$ctrl.hideDocumentation($event)" class="fa fa-times remove"></i>
</a>

控制器：

function hideDocumentation($event) {
  $event.stopPropagation();
  ///// MAKE SOME API CALLS
}

單擊<i>標記時如何防止重定向到https://example.com/ ？

Answer 1

我不知道角度，但$event.preventDefault()可能會成功。

Answer 2

類似的東西（我已經習慣了反應）：

<a href="" target="_blank" onClick="handleClickFunction">
  Documentation <i ng-click="$ctrl.hideDocumentation($event)" class="fa fa-times remove</i>
</a>

function hideDocumentation($event) {
  $event.stopPropagation();
  ///// MAKE SOME API CALLS
}

即：將您的 clickHandler 移動到實際的<a/>它仍在觸發並完全按照設計的目的進行導航...如果您在做完一些事情后仍想導航，則可以使用window.location = www.next-location.com來自點擊處理程序內部的window.location = www.next-location.com 。

通過將您的圖標包裝在 aa 標簽中，您實際上是在將其設為鏈接……但您似乎需要區分行為。 在我看來，如果可能的話，這些應該分開。 當您確實想要導航時，盲目調用 preventDefault 可能會產生意想不到的行為。 我將創建一個onClick處理程序來確定在這兩種情況下需要發生什么。 您可以只准確讀取點擊的內容（a 或 i）或執行類似這樣的操作來確定點擊的內容：

<a href="" target="_blank" onClick="($event) => $handleClick($event, 'a')">
  Documentation <i ng-click="$handleClick($event, 'i')" class="fa fa-times remove</i>
</a>

function hideDocumentation($event, el) {
  if (el === 'a') { 
    window.location = www.next-location.com 
    return
  }

  // else handle the non-nav scenario

  $event.preventDefault();
  $ctrl.hideDocumentation
  ///// MAKE SOME API CALLS
}