Jquery 이벤트가 버블링되는 것을 방지하는 방법을 설명하는 작은 예입니다.-JS 튜토리얼-php.cn

Jquery 이벤트가 버블링되는 것을 방지하는 방법을 설명하는 작은 예입니다.

WBOY

풀어 주다： 2016-05-16 16:41:42

원래의

869명이 탐색했습니다.

JS 이벤트 버블링이란?

객체에서 특정 유형의 이벤트(예: onclick 이벤트)를 트리거합니다. 객체가 이 이벤트에 대한 핸들러를 정의하는 경우 이 이벤트 핸들러가 정의되지 않거나 이벤트가 true를 반환하는 경우 이 이벤트가 이 핸들러를 호출합니다. , 그러면 이 이벤트는 처리될 때까지(상위 개체의 모든 유사한 이벤트가 활성화됨) 개체 계층 구조의 최상위 수준에 도달할 때까지 내부에서 외부로 이 개체의 상위 개체에 전파됩니다. 문서 개체(일부 브라우저는 창임)

Jquery 이벤트 버블링을 중지하는 방법은 무엇입니까?

간단한 예를 들어서 설명해보세요

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head runat="server"> 
<title>Porschev---Jquery 事件冒泡</title> 

<script src="jquery-1.3.2-vsdoc.js" type="text/javascript"></script> 

</head> 
<body> 
<form id="form1" runat="server"> 
<div id="divOne" onclick="alert('我是最外层');"> 
<div id="divTwo" onclick="alert('我是中间层！')"> 
<a id="hr_three" href="http://www.baidu.com" rel="external nofollow" rel="external nofollow" mce_href="http://www.baidu.com" rel="external nofollow" rel="external nofollow" onclick="alert('我是最里层！')">点击我</a> 
</div> 
</div> 
</form> 
</body> 
</html>

로그인 후 복사

예를 들어 위 페이지
세 개의 레이어로 나뉩니다. divOne은 외부 레이어, divTwo는 중간 레이어, hr_3은 가장 안쪽 레이어입니다. 모두 자체 클릭 이벤트가 있으며 가장 안쪽의 a 태그에도 href 속성이 있습니다.

페이지를 실행하고 "Click Me"를 클릭하면 다음과 같이 순서대로 팝업이 나타납니다. 나는 가장 안쪽 레이어입니다---->나는 중간 레이어입니다------>나는 가장 바깥쪽 레이어입니다
---->그럼 바이두에 접속해 보세요.

원래는 ID가 hr_3인 레이블만 클릭했는데 경고 작업이 3번 실행되었습니다.
이벤트 버블링 프로세스(태그 ID로 표시): hr_two----> divTwo----> 가장 안쪽 층에서 가장 바깥쪽 층으로 버블링됩니다.

어떻게 막나요?

1.event.stopPropagation();

<script type="text/javascript">
$(function() {
$("#hr_three").click(function(event) {
event.stopPropagation();
});
});
<script>

로그인 후 복사

"클릭하세요"를 다시 클릭하면 팝업이 뜹니다: 나는 가장 안쪽 레이어이고 Baidu로 연결됩니다

2.거짓 반환;

헤더에 다음 코드를 추가하면

<script type="text/javascript">
$(function() {
$("#hr_three").click(function(event) {
return false;
});
});
<script>

로그인 후 복사

다시 "Click me"를 클릭하면 팝업이 뜹니다. 가장 안쪽 레이어인데 바이두 페이지 링크가 실행되지 않습니다

다음에서 볼 수 있습니다.

1.event.stopPropagation();

이벤트 처리 중 이벤트 버블링은 방지되지만 기본 동작은 차단되지 않습니다(하이퍼링크 점프 실행)

2.거짓 반환;

이벤트 처리 중에는 이벤트 버블링이 방지되고 기본 동작이 방지됩니다(예: 방금 하이퍼링크 점프를 실행하지 않았습니다)

버블링과 관련된 또 다른 것이 있습니다:

3.event.preventDefault();

헤더 A 태그의 클릭 이벤트에 넣으면 "Click me"를 클릭해 주세요.

순서대로 팝업되는 것을 볼 수 있습니다. 나는 가장 안쪽 레이어입니다 -----> 나는 중간 레이어입니다 -----> 나는 가장 바깥 쪽 레이어이지만 결국 Baidu로 점프하지 않습니다

그 기능은 다음과 같습니다. 이벤트 처리 중에 이벤트 버블링을 차단하지 않지만 기본 동작을 차단합니다(모든 팝업 상자만 실행하고 하이퍼링크 점프는 실행하지 않음)