먼저 JS의 두 가지 예방 방법과 스톱 포거레이션 방법의 차이점을 설명하십시오.
PreverDefault 메소드의 역할은 무엇입니까? 예를 들어, <a href = "http://www.baidu.com"> baidu </a>, 이것은 http : // www로 Baidu 링크를 클릭하는 것입니다 .Baidu .. com, 이것은 <a> 레이블의 기본 동작이며, 예방 디프tault 메소드는 다른 것들이 기본 동작이 발생하지 않도록하는 것입니다. 코드 단락을보고 모든 사람이 다음을 이해합니다.
다음과 같이 코드 코드를 복사하십시오.
<!
<html xmlns = "http://www.w3.org/1999/xhtml">
<헤드>
<meta http-equiv = "content-type"content = "text /html; charset = utf-8" /> />
<title> js 링크 점프를 방지 </title>
<script type = "text/javaScript">
함수 stopDefault (e) {
if (e && e.preventDefault)
e.preventDefault ();
또 다른
Window.event.returnValue = false;
거짓을 반환합니다.
}
</스크립트>
</head>
<body>
<a href = "http://www.baidu.com"id = "testlink"> baidu </a>
<script type = "text/javaScript">
var test = document.getElementById ( 'testLink');
test.onclick = function (e) {{
Alert ( '내 링크 주소는' + this.href + '이지만 점프하지는 않을 것입니다.');
stopdefault (e);
}
</스크립트>
</body>
</html>
현재 Baidu 링크를 클릭하면 http://www.baidu.com을 열지 않지만 경고 대화 상자 만 팝업합니다.
스톱 포거레이션 방법은 어떻습니까? STOP 프로파도 화 방법에 대해 이야기하기 전에 JS 이벤트 에이전트를 설명해야합니다.
이벤트 프록시는 JavascIPRT 사건에서 종종 무시되는 두 가지 기능, 즉 이벤트 버블 링 및 대상 요소를 사용합니다. 예를 들어, 요소의 이벤트가 트리거되면 마우스가 버튼을 클릭하고 해당 요소의 모든 조상에서 동일한 이벤트가 트리거됩니다. 이 과정은 사고 버블 링이라고합니다. 모든 이벤트의 경우 대상 요소는 원시 요소이며,이 예제에서는 버튼도 있습니다. 대상 요소는 이벤트 객체의 속성 형태로 나타납니다. 이벤트 에이전트를 사용하는 경우 이벤트 프로세서를 요소에 추가하고 이벤트가 하위 레벨 요소에서 기포 될 때까지 기다릴 수 있으며 이벤트가 시작되는 요소를 쉽게 결정할 수 있습니다.
스톱 포거레이션 방법은 JS 이벤트가 버블 링을 방지하고 코드를 보는 것입니다.
다음과 같이 코드 코드를 복사하십시오.
<!
<html xmlns = "http://www.w3.org/1999/xhtml"lang = "gb2312">
<헤드>
<title> JS 입사 버블 전송 방지 (CancelBubble, StopPropagation) </title>
<meta name = "keywords"content = "js, 이벤트 버블 링, CancelBubble, StopPropagation" />
<cript>
함수 dosomething (obj, evt) {
경고 (obj.id);
var e = (evt) : window.event;
if (window.event) {
e.cancelbubble = true;
} 또 다른 {
//e.preventDefault ();
E.StopPropagation (); // 버블 링을 방지하기위한 다른 브라우저
}
}
</스크립트>
</head>
<body>
<div id = "parent1"onclick = "alert (this.id)">
<p> 이것은 Pain1 div입니다
<div id = "child1"onclick = "alert (this.id)">
<p> 이것은 child입니다. </p>
</div>
<p> 이것은 Pain1 div입니다
</div>
<br />
<div id = "parent2"onclick = "alert (this.id)">
<p> 이것은 Parent2 Div입니다
<div id = "child2"onclick = "dosomething (this, event);">> ">
<p> 이것은 child2입니다
</div>
<p> 이것은 Parent2 Div입니다
</div>
</body>
</html>
위의 코드를 이해합시다.