버블링을 방지하는 js 및 이벤트를 방지하는 jquery bubbling_javascript 기술의 예 소개-JS 튜토리얼-php.cn

버블링을 방지하는 js 및 이벤트를 방지하는 jquery bubbling_javascript 기술의 예 소개

WBOY

풀어 주다： 2016-05-16 17:14:16

원래의

1159명이 탐색했습니다.

js는 버블링을 방지합니다
버블링을 방지하는 과정에서 W3C와 IE는 서로 다른 방식을 채택하므로 다음과 같은 호환성을 만들어야 합니다.

코드 복사 코드는 다음과 같습니다.

 
function stopPro(evt){ 
 var e = evt || window.event; 
//returnValue 이 속성이 설정되면 해당 값은 이벤트 핸들러의 반환 값보다 우선순위가 높습니다. 이 속성을 fasle로 설정하면 
//이벤트가 발생한 소스 요소의 기본 동작을 취소할 수 있습니다. 
//window.event?e.returnValue = false:e.preventDefault(); 
window.event?e.cancelBubble=true:e.stopPropagation(); 
} 

또는:

코드 복사 코드는 다음과 같습니다.

 
function cancelBubble(e ) { 
var evt = e ? e : window.event; 
if (evt.stopPropagation) { 
//W3C 
evt.stopPropagation(); 
else 
 //IE 
evt.cancelBubble = true; 
} 

 

JQuery는 이벤트 버블링을 방지하는 두 가지 방법을 제공합니다.
방법 1: event.stopPropagation();

코드 복사 코드는 다음과 같습니다.

 $("#div1").mousedown(function(event){ 
event.stopPropagation(); 
}) 

 

방법 2: false를 반환합니다. >

코드 복사 코드는 다음과 같습니다.

$("#div1").mousedown(function (event){

return false; 
}) 

 
Jquery는 기본 작업을 차단합니다. 즉, 이벤트와 관련된 기본 작업을 수행하지 않도록 브라우저에 알립니다. 

예:

코드 복사 코드는 다음과 같습니다.

$(" a").click(function(event){

event.preventDefault(); //기본 동작을 방지합니다. 즉, 링크가 점프하지 않습니다. 
alert(4);//그러나 이 동작도 pop up
event.stopPropagation ();//버블링 이벤트 방지, 상위 클릭 이벤트가 호출되지 않습니다
false 반환;//이벤트 버블링을 방지할 뿐만 아니라 이벤트 자체도 방지합니다
}); 
 
 
그러나 이 두 가지 방법에는 차이가 있습니다. false를 반환하면 이벤트가 발생하는 것을 방지할 뿐만 아니라 이벤트 자체도 방지할 수 있습니다. event.stopPropagation()은 이벤트가 버블링되는 것을 방지할 뿐 이벤트 자체를 방지하지는 않습니다. 

시나리오 적용: Google과 Baidu의 연결 상자. 드롭다운 목록이 팝업되면 사용자는 드롭다운 목록 영역에서 마우스를 누를 때 텍스트 입력 상자에 커서를 유지해야 합니다.

Jquery 케이스:

코드 복사 코드는 다음과 같습니다.

aaaaaa
baidu.com

js 케이스:

코드 복사

코드는 다음과 같습니다. function tt(){ alert("div") } function ttt(){

var e = 인수.caller.arguments[0] || window.event;

window.event?e.returnValue = false:e.preventDefault()
alert(3); event?e.cancelBubble: e.stopPropagation();
}

ccccc
baidu.com< /div>