최근에 AngularJS 를 이용해서 작업을 하던 도중 알게된 작은 버그이다.
(참고로 버전은 AngularJS 1 버전이고, 크롬에서 발생한 버그이다.)
문제가 된 HTML 은 다음과 같다.
<button class="button btn-danger" ng-click="deleteElement($index)">
<span class="glyphicon glyphicon-remove" aria-hidden="true">Delete</span></button>
위의 코드는 단순히 버튼을 클릭하면 해당 Element 에 대한 정보를 이용해서 ng-click 이벤트를 발생시키는 HTML 코드이다.
이 코드는 아주 잘 작동하지만, HTML 에서 엔터키 입력 시, 아주 사소한 버그를 발견할 수 있었다.
위의 코드에서 같은 scope 로 묶인 Text Box 에서 엔터를 입력하자마자 맨 위 레코드가 삭제되는 버그를 발견하였다.
정확히는 Enter Key 를 입력받아 ng-click 이벤트가 작동한 것이다. 다만, 명시적으로 ng-click 이 호출되지 않은 탓에 Parameter인 $index 는 전달되지 않은듯 하다.
문제의 원인은 <button> 태그에 있었는데, 기본적으로 button 태그의 type 은 "submit" 형이기 때문에, 엔터키 입력에 반응할 수 있다.
(이는 브라우저 별로도 다소 다른 듯 하다.)
문제 해결을 위해서는 다음과 같이 명시적으로 타입을 지정해주면 간단히 해결된다.
<button type="button" class="button btn-danger" ng-click="deleteElement($index)">
<span class="glyphicon glyphicon-remove" aria-hidden="true">Delete</span></button>
혹은 어느정도 규모의 AngularJS 프로젝트를 운용중이라면 directive 로 묶어서 처리하는 것도 좋은 방법이다.
(참고자료 : http://www.jomendez.com/2015/02/16/prevent-ng-click-action-hitting-enter/)
'Programming Language > Javascript + HTML' 카테고리의 다른 글
| 웹프론트엔드에서 쓰로틀링(Throttling)과 디바운싱(Debouncing)의 개념 (0) | 2019.02.09 |
|---|---|
| AngularJS 에서의 Scope 의 개념 (0) | 2018.10.31 |
| HTML5 의 Web Storage 에 관하여 (0) | 2018.10.11 |
| DOM 오브젝트(Document Object Model) 에 대한 정리 (0) | 2018.10.08 |
| <span> 과 <div> 의 차이로 보는 Block Element 와 Inline Element 의 개념 (0) | 2018.10.04 |