각도 ngClick은 기본 동작을 사용하여 버블링을 방지합니다.-PHP开发-php.cn

각도 ngClick은 기본 동작을 사용하여 버블링을 방지합니다.

高洛峰

풀어 주다： 2016-12-08 09:40:01

원래의

1447명이 탐색했습니다.

이 문서의 예에서는 각도 ngClick이 버블링을 방지하고 기본 동작을 사용하는 방법을 설명합니다. 참고할 수 있도록 모든 사람과 공유하세요. 자세한 내용은 다음과 같습니다.

이것은 실제로 매우 간단한 질문입니다. Angular의 공식 API 문서를 주의 깊게 살펴보면 기록하고 싶지 않을 것입니다. 그런데 이 질문이 여러 번 물어보셨기 때문에 오늘은 여기에 기록하겠습니다.

Angular에서는 ngClick, ngBlur, ngCopy, ngCut, ngDblclick 등 일부 ng 이벤트에 $event라는 변수가 추가되었습니다...

예를 들어 ngClick은 공식 document.of:

클릭 시 평가할 표현식(이벤트 개체는 $event로 사용 가능)

Angular 코드 보기 ngEventDirs.js:

var ngEventDirectives = {};
forEach(
   &#39;click dblclick mousedown mouseup mouseover mouseout mousemove mouseenter mouseleave keydown keyup keypress submit focus blur copy cut paste&#39;.split(&#39; &#39;),
   function(name) {
    var directiveName = directiveNormalize(&#39;ng-&#39; + name);
    ngEventDirectives[directiveName] = [&#39;$parse&#39;, function($parse) {
     return {
      compile: function($element, attr) {
       var fn = $parse(attr[directiveName]);
       return function(scope, element, attr) {
        element.on(lowercase(name), function(event) {
         scope.$apply(function() {
          fn(scope, {$event:event});
         });
        });
       };
      }
     };
    }];
   }
);

로그인 후 복사

위 코드에서 두 가지 정보를 얻을 수 있습니다:

1. Angular에서 지원하는 이벤트: click dblclick mousedown mouseup mouseover mouseout mousemove mouseenter mouseleave keydown keyup keypress submit focus Blur copy 잘라내기 붙여넣기

② Angular가 이벤트 함수를 실행할 때 현재 이벤트 객체를 나타내는 $event라는 상수를 전달합니다. Angular 이전에 jQuery를 도입했다면 이것이 jQuery 이벤트입니다.

따라서 이벤트의 stopPropagation을 사용하여 이벤트 버블링을 방지할 수 있습니다. 다음 코드: jsbin

html 코드:

<!DOCTYPE html>
<html id="ng-app" ng-app="app">
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.1.5/angular.min.js"></script>
<meta charset="utf-8">
<title>JS Bin</title>
</head>
<body ng-controller="demo as d">
<div ng-click="d.click(&#39;parent&#39;,$event)">
given some text for click
<hr>
<input type="checkbox" ng-model="d.stopPropagation" />Stop Propagation ?
<hr>
<button type="button" ng-click="d.click(&#39;button&#39;,$event)">button</button>
</div>
</body>
</html>

로그인 후 복사

js 코드:

angular.module("app",[])
.controller("demo",[function(){
 var vm = this;
 vm.click = function(name,$event){
  console.log(name +" -----called");
  if(vm.stopPropagation){
   $event.stopPropagation();
  }
 };
 return vm;
}]);

로그인 후 복사

jsbin에서 효과를 확인할 수 있습니다.

먼저 콘솔을 열고 Stop Propagation을 선택하지 않고 버튼을 클릭하면 두 개의 로그 기록이 표시됩니다. 반대로 선택하면 버튼의 로그 정보만 나타납니다.

이 기사가 AngularJS 프로그래밍에 종사하는 모든 사람에게 도움이 되기를 바랍니다.