js 의 거품 사건 및 거품 을 어떻게 막 습 니까?
예 를 들 어 마우스 가 단 추 를 누 르 면 부모 div 와 자식 div 가 함께 onclick 이벤트 에 가입 할 때 자식 div 의 onclick 이벤트 가 발생 하면 자식 div 는 해당 하 는 js 작업 을 합 니 다.하지만 부모 div 의 onclick 사건 도 촉발 된다.이 로 인해 사건 의 다 중 동시 다발 로 인해 페이지 가 혼 란 스 러 워 졌 다.이것 이 바로 거품 사건 이다.
거품 을 없 애 는 것 은 바로 이런 메커니즘 을 없 애 는 것 이다.JavaScript 이벤트 거품 전달 막 기
（cancelBubble 、stopPropagation） 호환성 코드var e=(event)?event:window.event; //
if (window.event) {
e.cancelBubble=true;// ie cancelBubble
} else {
e.stopPropagation(); // firefox stopPropagation
}
구체 적 인 예 는 다음 과 같다.
<html>
<head>
<title> js title>
<meta charset="utf-8"/>
<script type="text/javascript">
function preventBubble (obj,event) {
alert(obj.id);
var e=(event)?event:window.event; //
if (window.event) {
e.cancelBubble=true;// ie cancelBubble
} else {
e.stopPropagation(); // firefox stopPropagation
}
}
script>
<style>
.parent{
width:200px;
height:200px;
background-color:yellow;
text-align:center;
display:flex;
align-items: center;
}
.parent:last-child{
margin-top:20px;
background-color:gray;
}
.child{
width:100px;
height:100px;
background-color:orange;
margin:0 auto;
}
style>
head>
<body>
<div id="parent1" onclick="alert(this.id)" class="parent">parent1
<div id="child1" onclick="alert(this.id)" class="child">child1div>
div>
<div id="parent2" onclick="alert(this.id)" class="parent">parent2
<div id="child2" onclick="preventBubble(this,event);" class="child">child2div>
div>
body>
html>
이 내용에 흥미가 있습니까?
현재 기사가 여러분의 문제를 해결하지 못하는 경우 AI 엔진은 머신러닝 분석(스마트 모델이 방금 만들어져 부정확한 경우가 있을 수 있음)을 통해 가장 유사한 기사를 추천합니다:
Rails Turbolinks를 페이지 단위로 비활성화하는 방법원래 Turobolinks란? Turbolinks는 링크를 생성하는 요소인 a 요소의 클릭을 후크로 하고, 이동한 페이지를 Ajax에서 가져옵니다. 그 후, 취득 페이지의 데이터가 천이 전의 페이지와 동일한 것이 있...
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
CC BY-SA 2.5, CC BY-SA 3.0 및 CC BY-SA 4.0에 따라 라이센스가 부여됩니다.
좋은 웹페이지 즐겨찾기
