> 웹 프론트엔드 > 프런트엔드 Q&A > 자바스크립트에서 이벤트 버블링을 방지하는 방법

자바스크립트에서 이벤트 버블링을 방지하는 방법

WBOY
풀어 주다: 2022-04-11 11:52:37
원래의
2891명이 탐색했습니다.

방법: 1. 기본 동작인 "event.stopPropagation()" 구문을 금지하되 방지하려면 stopPropagation() 메서드를 사용합니다. 2. 기본 동작인 "event.stopPropagation()" 구문을 금지하려면 반환 메서드를 사용합니다. function(){false를 반환} ".

자바스크립트에서 이벤트 버블링을 방지하는 방법

이 튜토리얼의 운영 환경: Windows 10 시스템, JavaScript 버전 1.8.5, Dell G3 컴퓨터.

Javascript에서 이벤트 버블링을 비활성화하는 방법

네이티브 JS에는 이벤트 개체에 대한 두 가지 주요 방법이 있습니다.

stopPropagation 및 PreventDefault

첫 번째는 버블링을 비활성화하는 것이고 두 번째는 기본 동작을 방지하는 것입니다

참고: 이는 jQuery 메소드가 아닌 기본 JS 메소드입니다. 이벤트 매개변수는

    ele.onmouseover=function(event){
        event=event||window.event;
        if(event.stopPropagation){
            event.stopPropagation();//标准留言器中禁止冒泡;
            // preventDefault中文意思是阻止默认行为;
        }else{
            e.cancelBubble=true;//IE浏览器禁止冒泡;IE678
        }
    }
로그인 후 복사
로그인 후 복사

1과 같은 변수일 수 있습니다. 이벤트 버블링은 금지됩니다. .

return false 이벤트가 부풀어 오르는 것을 방지할 뿐만 아니라 이벤트 자체도 방지합니다.

event.stopPropagation()은 이벤트가 발생하는 것을 방지할 뿐 이벤트 자체를 방지하지는 않습니다.

조직:

1.event.stopPropagation();

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

2.return false;

이벤트 처리 중에 이벤트 버블링이 방지되고 기본 동작(하이퍼링크 점프가 수행되지 않음)이 방지됩니다.

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

    ele.onmouseover=function(event){
        event=event||window.event;
        if(event.stopPropagation){
            event.stopPropagation();//标准留言器中禁止冒泡;
            // preventDefault中文意思是阻止默认行为;
        }else{
            e.cancelBubble=true;//IE浏览器禁止冒泡;IE678
        }
    }
로그인 후 복사
로그인 후 복사
해당 기능은 다음과 같습니다. 이벤트 처리 중에는 이벤트 버블링이 수행되지 않습니다. 차단되었지만 기본 동작은 차단되었습니다(모든 팝업 상자만 실행하고 하이퍼링크 점프는 실행하지 않음)[관련 권장 사항:

javascript 비디오 튜토리얼

,

웹 프론트 엔드

]

위 내용은 자바스크립트에서 이벤트 버블링을 방지하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

관련 라벨:
원천:php.cn
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿