집 > 기사 > 웹 프론트엔드 > JavaScript_javascript 기술에서 이벤트 전파를 중지하기 위해 stopPropagation 함수를 사용하는 예

JavaScript_javascript 기술에서 이벤트 전파를 중지하기 위해 stopPropagation 함수를 사용하는 예

WBOY원래의: 2016-05-16 16:38:261659검색

JS의 이벤트는 기본적으로 버블링되어 레이어별로 위쪽으로 전파됩니다. stopPropagation() 함수를 통해 DOM 계층 구조에서 이벤트 전파를 중지할 수 있습니다. 다음 예와 같습니다:

HTML 코드:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>stopPropagation()使用 - 琼台博客</title>
</head>
<body>
<button>button</button>
</body>
</html>
[/code] 
没有加stopPropagation()
[code]
var button = document.getElementsByTagName('button')[0];
button.onclick=function(event){
  alert('button click');
};
 
document.body.onclick=function(event){
  alert('body click');
}

DOM은 레이어별로 위쪽으로 전파되므로 버튼 버튼을 클릭하면 본문 레이어에도 전파되므로 본문 레이어를 클릭해도 반응합니다. 결과적으로 버튼과 바디라는 두 개의 경고 상자가 나타납니다.

stopPropagation()을 추가했습니다

var button = document.getElementsByTagName('button')[0];
button.onclick=function(event){
  alert('button click');
  // 停止DOM事件层次传播
  event.stopPropagation();
};
 
document.body.onclick=function(event){
  alert('body click');
}

버튼의 클릭 이벤트 처리 함수에서 stopPropagation()을 사용하여 이벤트 전파 기능을 중지하므로 버튼 클릭 이벤트에서 경고 상자가 나타난 후에는 본문으로 전파될 수 없으며, 본문 경고 상자가 나타납니다. 다시 팝업되지 않습니다. 결과적으로 경고 상자는 한 번만 논의됩니다.

많은 아이들이 JS를 작성할 때 DOM 이벤트가 레이어별로 상위로 전파되는 기능을 무시하여 프로그램 이상이 발생하는 경우가 많습니다. 좀 더 심층적인 지식이 필요하다면 JS 이벤트 버블링에 대한 정보를 찾아보세요.

성명：

이전 기사：기본 js는 jq를 모방하여 현재 브라우저가 ie6~8_javascript 기술에 맞는지 확인합니다.다음 기사：기본 js는 jq를 모방하여 현재 브라우저가 ie6~8_javascript 기술에 맞는지 확인합니다.

JavaScript_javascript 기술에서 이벤트 전파를 중지하기 위해 stopPropagation 함수를 사용하는 예

관련 기사