앵커 태그의 디폴트를 방지하는 방법

앵커 태그의 디폴트를 방지하는 방법

예를 들어 다음과 같은 앵커 태그가 있다고 칩시다.

<a href="#" ng-click="do()">Click</a>

브라우저가 AngularJS에서 #로 이동하지 않도록 하려면 어떻게 해야 합니까?

ngHref에 대한 문서에 따르면 href를 종료하거나 href=do href를 실행할 수 있습니다.

<input ng-model="value" /><br />
<a id="link-1" href ng-click="value = 1">link 1</a> (link, don't reload)<br />
<a id="link-2" href="" ng-click="value = 2">link 2</a> (link, don't reload)<br />
<a id="link-4" href="" name="xx" ng-click="value = 4">anchor</a> (link, don't reload)<br />
<a id="link-5" name="xxx" ng-click="value = 5">anchor</a> (no link)<br />

업데이트: 이후 이 솔루션에 대한 의견을 바꿨습니다.더 많은 개발과 시간을 들여 이 문제에 임한 후, 이 문제에 대한 더 나은 해결책은 다음을 수행하는 것이라고 생각합니다.

<a ng-click="myFunction()">Click Here</a>

그런 다음 업데이트하십시오.css추가 규칙을 가지려면:

a[ng-click]{
    cursor: pointer;
}

훨씬 더 단순하고 동일한 기능을 제공하며 훨씬 더 효율적입니다.향후 이 솔루션을 찾는 다른 사람에게도 도움이 되기를 바랍니다.

---

다음은 기존 솔루션입니다.이 솔루션은 레거시 목적으로만 사용할 수 있습니다.

이 문제가 많은 경우 이 문제를 해결하는 간단한 지시사항은 다음과 같습니다.

app.directive('a', function() {
    return {
        restrict: 'E',
        link: function(scope, elem, attrs) {
            if(attrs.ngClick || attrs.href === '' || attrs.href === '#'){
                elem.on('click', function(e){
                    e.preventDefault();
                });
            }
        }
   };
});

모든 앵커 태그가 체크됩니다(<a></a>)가 동작하는지 여부를 확인합니다.hrefattribute가 빈 문자열(""또는 해시('#') 또는ng-click과제.이러한 조건 중 하나가 발견되면 이벤트를 포착하여 기본 동작을 방지합니다.

유일한 단점은 모든 앵커태그에 대해 이 디렉티브를 실행하는 것입니다.따라서 페이지에 다수의 앵커태그가 있고 소수의 앵커태그에 대해서만 기본동작을 방지하려는 경우 이 지시는 그다지 효율적이지 않습니다.하지만 저는 거의 항상preventDefault그래서 나는 이 지시어를 내 Angular에 모두 사용한다.JS 앱

$event 객체를 메서드에 전달하여 호출할 수 있습니다.$event.preventDefault()디폴트 처리가 발생하지 않도록 합니다.

<a href="#" ng-click="do($event)">Click</a>

// then in your controller.do($event) method
$event.preventDefault()

나는 이런 종류의 일에 지시문을 사용하는 것을 선호한다.여기 예가 있어요.

<a href="#" ng-click="do()" eat-click>Click Me</a>

그리고 명령어 코드는eat-click:

module.directive('eatClick', function() {
    return function(scope, element, attrs) {
        $(element).click(function(event) {
            event.preventDefault();
        });
    }
})

이것으로, 다음의 항목을 추가할 수 있습니다.eat-click어떤 요소에도 귀속시키면preventDefault()자동으로 편집됩니다.

이점:

1. 추한 건 지나치지 않아도 돼$event에 이의를 제기하다do()기능.
2. 컨트롤러는 스탭아웃 할 필요가 없기 때문에 유닛 테스트성이 향상됩니다.$event물건

비록 르노는 훌륭한 해결책을 제시했지만

<a href="#" ng-click="do(); $event.preventDefault()">Click</a> 

개인적으로는 부작용을 피하기 위해 $event.stopPropagation()도 필요하다고 생각합니다.

<a href="#" ng-click="do(); $event.preventDefault(); $event.stopPropagation();">
    Click</a>

나의 해결책이 될 것이다.

ng-click="$event.preventDefault()"

제가 찾은 가장 쉬운 해결책은 다음과 같습니다.

<a href="#" ng-click="do(); $event.preventDefault()">Click</a>

그래서 이 답들을 읽어보면, @Chris는 여전히 가장 "정답"한 답을 가지고 있다고 생각하지만, 한 가지 문제가 있는데, 그것은 "시점"을 보여주지 않는다는 것이다.

커서를 추가하지 않고 이 문제를 해결할 수 있는 두 가지 방법은 다음과 같습니다.

1. javascript:void(0)#:

   <a href="javascript:void(0)" ng-click="doSomething()">Do Something</a>
   

2. $event.preventDefault() ng-click directive(DOM)

   <a href="#dontGoHere" ng-click="doSomething(); $event.preventDefault()">Do Something</a>
   

개인적으로 나는 후자보다 전자를 선호한다. javascript:void(0)에는 여기서 설명하는 다른 이점이 있습니다.이 링크에서는 "침해하지 않는 자바스크립트"에 대한 논의도 이루어지고 있는데, 이는 놀랄 만큼 최근의 것으로 각진 어플리케이션에 직접 적용될 필요는 없습니다.

다음과 같이 할 수 있습니다.

삭제 1. 삭제hrefanchor(앵커로부터의 속성)a) ★★

2. css의 포인터 커서를 ng클릭 요소로 설정한다.

 [ng-click],
 [data-ng-click],
 [x-ng-click] {
     cursor: pointer;
 }

HTML

여기서는 순수 angularjs:ng-click 함수 근처에서는 세미콜론을 구분하여 prevent Default() 함수를 쓸 수 있습니다.

<a href="#" ng-click="do(); $event.preventDefault(); $event.stopPropagation();">Click me</a>

JS

$scope.do = function() {
    alert("do here anything..");
}

(또는)

이 방법으로 진행할 수 있습니다.이 문제는 이미 여기에서 논의되고 있습니다.

HTML

<a href="#" ng-click="do()">Click me</a>

JS

$scope.do = function(event) {
    event.preventDefault();
    event.stopPropagation()
}

당신은 웹 앱을 만들고 있는데 왜 링크가 필요합니까?

닻을 버튼으로 바꿔!

<button ng-click="do()"></button>

위에 표시되어 있지 않은 이 옵션을 시험해 보겠습니다.

<a href="" ng-click="do()">Click</a>

관련성이 있는 경우:

<a ng-click="unselect($event)" />

...

scope.unselect = function( event ) {
 event.preventDefault();
 event.stopPropagation();
}

...

href에서 이벤트를 회피하는 가장 안전한 방법은 다음과 같이 정의하는 것입니다.

<a href="javascript:void(0)" ....>

저는 다음과 같이 하겠습니다.

<a ng-click="do()">Click</a>

• 문서에 따르면 href에서 벗어날 수 있으며 그러면 Angular가 기본 방지 기능을 대신 처리합니다.

이 방지 디폴트 설정 전체가 혼란스러웠기 때문에 언제 어디서 Angular가 디폴트를 막고 있는지를 나타내는 JSFiddle을 작성했습니다.

JSFiddle은 Angular의 명령을 사용하고 있으므로 정확히 같아야 합니다.소스코드는 여기에 표시됩니다.태그 소스 코드

나는 이것이 몇몇 사람들에게 해명에 도움이 되기를 바란다.

ngHref에 문서를 투고하고 싶었지만 평판상 그럴 수 없습니다.

이게 제가 항상 하는 일이에요.마법처럼 작동!

<a href ng-click="do()">Click</a>

또는 인라인이 필요한 경우 다음을 수행할 수 있습니다.

<a href="#" ng-click="show = !show; $event.preventDefault()">Click to show</a>

많은 답변들이 과잉으로 보입니다.이 기능은, 고객에게 있어서

 <a ng-href="#" ng-click="$event.preventDefault();vm.questionContainer($index)">{{question.Verbiage}}</a>

Angular 8 이상을 사용하는 경우 지시문을 작성할 수 있습니다.

import { Directive, HostListener } from '@angular/core';

@Directive({
  selector: '[preventDefault]'
})
export class PreventDefaultDirective {

  @HostListener("click", ["$event"])
  public onClick(event: any): void
  {
    console.log('click');
    debugger;
      event.preventDefault();
  }

}

컴포넌트의 앵커태그에서는 다음과 같이 배선할 수 있습니다.

  <a ngbDropdownToggle preventDefault class="nav-link dropdown-toggle" href="#" aria-expanded="false" aria-haspopup="true" id="nav-dropdown-2">Pages</a>

App Module에는 다음과 같은 선언이 있어야 합니다.

import { PreventDefaultDirective } from './shared/directives/preventdefault.directive';


@NgModule({
  declarations: [
    AppComponent,
    PreventDefaultDirective

성능 저하를 위해 href 속성의 값이 존재해야 하기 때문에(js가 꺼진 경우), 빈 href 속성(또는 "#")을 사용할 수 없습니다만, 이벤트(e) 변수가 필요하기 때문에 위의 코드가 작동하지 않았습니다.저는 저만의 지시문을 만들었습니다.

angular.module('MyApp').directive('clickPrevent', function() {
  return function(scope, element, attrs) {
    return element.on('click', function(e) {
      return e.preventDefault();
    });
  };
});

HTML의 경우:

<a data-click-prevent="true" href="/users/sign_up" ng-click="openSignUpModal()">Sign up</a>

테니스젠트의 대답에서 차용한 것이다.모든 링크에 추가할 커스텀 디렉티브를 작성할 필요가 없다는 점이 마음에 듭니다.하지만 IE8에서 그를 일하게 할 수 없었다.여기 마침내 나에게 효과가 있었던 것이 있습니다(각도 1.0.6 사용).

bind는 angular로 제공되는 jqLite를 사용할 수 있으므로 완전한 jQuery로 랩할 필요가 없습니다.stop Propogation 메서드도 필요.

.directive('a', [
    function() {
        return {
            restrict: 'E',
            link: function(scope, elem, attrs) {

                elem.bind('click', function(e){
                    if (attrs.ngClick || attrs.href === '' || attrs.href == '#'){
                        e.preventDefault();
                        e.stopPropagation();
                    }
                })
            }
        };
    }
])

앵커를 사용하여 각진 부트스트랩 드롭 다운을 했을 때도 같은 문제가 발생했습니다.불필요한 부작용(즉, prevent Default()를 사용했기 때문에 드롭 다운이 닫히지 않음)을 회피하는 유일한 해결책은 다음을 사용하는 것이었습니다.

 <a href="javascript:;" ng-click="do()">Click</a>

href로 가기 싫으면...마크업을 변경하고 앵커 태그가 아닌 버튼을 사용해야 합니다. 왜냐하면 그것은 의미론적으로 앵커나 링크가 아니기 때문입니다.반대로 체크하고 리다이렉트하는 버튼이 있는 경우는 버튼이 아닌 링크/앵커 태그여야 합니다.테스트 [여기에 테스트 스위트 삽입]를 참조하십시오.

변경 내용을 저장하도록 요청하거나 더러운 상태를 확인하도록 조건부로 리디렉션하는 링크의 경우...ng-click="를 사용해야 합니다.function($event)" 및 일부 function on your validation 오류 preventDefault 및 stopPropagation.

또, 그렇게 할 필요는 없다고 해서.javascript:discript(0)는 옛날에는 잘 동작했습니다.하지만 href 내에서 javascript를 사용하는 악의적인 해커/브라우저 플래그 앱/브라우저 때문에...위에 입력할 이유가 없습니다.

2010년이 2016년이면 버튼처럼 작동하는 링크를 사용할 이유가 없습니다.IE8 이하를 계속 지원해야 하는 경우 사업장을 재평가해야 합니다.

/* NG CLICK PREVENT DEFAULT */

app.directive('ngClick', function () {
    return {
        link: function (scope, element, attributes) {
            element.click(function (event) {
                event.preventDefault();
                event.stopPropagation();
            });
        }
    };
});

때 해야 할 일은, 이 말은 입니다.href적으로로귀귀귀귀귀귀

의 소스 코드를 보면,a Directive부분)는- （ Angular core ang ） - 31 음음음 음음음 29음 음음 。

if (!element.attr(href)) {
    event.preventDefault();
}

즉, Angular는 이미 href 없이 링크 문제를 해결하고 있습니다.아직 문제가 남아 있는 것은 css 문제뿐입니다.ng클릭이 있는 앵커에도 포인터 스타일을 적용할 수 있습니다.예를 들어 다음과 같습니다.

a[ng-click] {
    /* Styles for anchors without href but WITH ng-click */
    cursor: pointer;
}

따라서 실제 링크를 미묘하고 다른 스타일링으로 표시한 후 기능을 수행하는 링크로 표시함으로써 사이트에 더 쉽게 액세스할 수 있습니다.

해피 코딩!

$location의 Html5Mode 내에서 URL 리디렉션을 비활성화하여 목표를 달성할 수 있습니다.페이지에 사용되는 특정 컨트롤러 내에서 정의할 수 있습니다.다음과 같은 경우:

app.config(['$locationProvider', function ($locationProvider) {
    $locationProvider.html5Mode({
        enabled: true,
        rewriteLinks: false,
        requireBase: false
    });
}]);

내 경우 각도: 10 - 이 작업을 수행합니다.

  <a [routerLink]="" (click)="myFunc()"> Click me </a>

갱신일 :이 방법을 사용하면 리졸바가 새로고침됩니다.@Meeker님 감사합니다

대체 방법은 다음과 같습니다.

<span ng-click="do()">Click</span>

언급URL : https://stackoverflow.com/questions/10931315/how-to-preventdefault-on-anchor-tags