防止使用ng-click的click元素觸發錨標簽

Question

我有一個<span> ，在<a>標記內帶有ng-click處理程序。

<a href="/foo/bar">
  <h1>Some title</h1>
  <span ng-click="doSomething()">Say Hi!</span>
</a>

單擊此跨度時，如何防止<a>標記導航到其位置？

編輯：我找到了答案-使用e.preventDefault(); 不是e.stopPropagation(); 。

Answer 1

嘗試使用event.stopPropagation()防止事件冒泡DOM樹

<span ng-click="doSomething($event)">Say Hi!</span>

調節器

$scope.doSomething = function (event){
    event.stopPropagation();
    // other code
}

Answer 2

<a href="/foo/bar">
  <h1>Some title</h1>
  <span prevent-click="doSomething()">Say Hi!</span>
</a>

Directive.js

.directive('preventClick', function () {
    return {
        restrict: 'A',
        link: function (scope, element, attrs) {
            element.bind('click', function (e) {
                e.preventDefault();
                scope.$apply(attrs.preventClick);
            }
        }
    }

Answer 3

答案是使用$event.preventDefault() 。 與使用stopPropagation()來阻止事件冒泡DOM樹並觸發其他處理程序相比，這對於停止HTML元素的默認行為而言尤其如此。

在這種情況下，我們將停止特定元素的默認行為，因此preventDefault()是解決方案。