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

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>

성명：

본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.