집 > 기사 > 웹 프론트엔드 > JS 버블링 및 브라우저 기본 동작을 방지하는 방법

JS 버블링 및 브라우저 기본 동작을 방지하는 방법

php中世界最好的语言원래의: 2018-03-16 10:25:131406검색

이번에는 JS의 버블링을 방지하는 방법과 브라우저의 기본 동작을 보여드리겠습니다. JS의 버블링과 브라우저의 기본 동작을 방지하기 위한 주의 사항은 무엇입니까? 보세요.

이벤트 호환:

function myfn(e){ var evt = e ? e:window.event; }

js 이벤트 버블링 중지

function myfn(e){
window.event? window.event.cancelBubble = true : e.stopPropagation();
}

js 기본 동작 방지

function myfn(e){
window.event? window.event.returnValue = false : e.preventDefault();
}

다음은 JavaScriptstop에 관한 것입니다. 버블링 및 차단 기본 동작에 대한 자세한 설명

버블링을 방지하기 위해

w3c의 메소드는 e.stopPropagation()이고, IE는 e.cancelBubble = true를 사용합니다.

stopPropagation도 이벤트 객체(Event)의 메소드이며 그 기능은 다음과 같습니다. 대상 요소에서 버블링 이벤트를 방지하지만 기본 동작을 방지하지는 않습니다. 버블링 이벤트란 무엇입니까? "클릭" 이벤트가 버튼에 바인딩되면 "클릭" 이벤트가 해당 상위 요소에서 차례로 트리거됩니다. stopPropagation은 대상 요소의 이벤트가 상위 요소로 버블링되는 것을 방지합니다. 예:

<div id=&#39;div&#39; onclick=&#39;alert("div");&#39;>
<ul onclick=&#39;alert("ul");&#39;>
<li onclick=&#39;alert("li");&#39;>test</li>
</ul>
</div>

위 코드의 데모는 test를 클릭하면 Alert("li"), Alert("ul"), Alert("div")가 순차적으로 발생하는 이벤트입니다. 버블링.

버블링 방지

window.event? window.event.cancelBubble = true : e.stopPropagation();

기본 동작 방지

w3c 메소드는 e.preventDefault()이고, IE는 e.returnValue = false를 사용합니다.

preventDefault 이벤트 객체(Event)의 메소드이며, 그 기능은 다음과 같습니다. 취소 대상 요소의 기본 동작입니다. 기본 동작에 대해 이야기하고 있으므로 요소를 취소하려면 먼저 기본 동작이 있어야 합니다. 요소 자체에 기본 동작이 없으면 호출은 당연히 유효하지 않습니다. 어떤 요소에 기본 동작이 있나요? 링크 , 제출 버튼 등. 이벤트 객체의 취소 가능 여부가 false인 경우 기본 동작이 있어도 PreventDefault 호출이 작동하지 않는다는 의미입니다.

우리 모두는 링크의 기본 동작이 지정된 페이지로 이동하는 것임을 알고 있습니다. 점프를 방지하기 위해 이를 예로 들어 보겠습니다.

//假定有链接<a href="http://caibaojian.com/" id="testA" >caibaojian.com</a>
var a = document.getElementById("testA");
a.onclick =function(e){
if(e.preventDefault){
e.preventDefault();
}else{
window.event.returnValue == false;
}
}

return false

javascript의 return false는 기본 동작만 방지합니다. , 그러나 jQuery를 사용하면 기본 동작과 객체 버블링이 모두 방지됩니다.

다음은 기본 동작만 방지하고 버블링을 멈추지 않는 기본 js를 사용합니다.

<div id=&#39;div&#39;  onclick=&#39;alert("div");&#39;>
<ul  onclick=&#39;alert("ul");&#39;>
<li id=&#39;ul-a&#39; onclick=&#39;alert("li");&#39;><a href="http://caibaojian.com/"id="testB">caibaojian.com</a></li>
</ul>
</div>
var a = document.getElementById("testB");
a.onclick = function(){
return false;
};

다음은 jQuery를 사용합니다.

<div id=&#39;div&#39;  onclick=&#39;alert("div");&#39;>
<ul  onclick=&#39;alert("ul");&#39;>
<li id=&#39;ul-a&#39; onclick=&#39;alert("li");&#39;><a href="http://caibaojian.com/"id="testC">caibaojian.com</a></li>
</ul>
</div>
$("#testC").on('click',function(){
return false;
});

사용 요약

버블링 동작을 중지해야 할 경우

function stopBubble(e) { 
//如果提供了事件对象，则这是一个非IE浏览器 
if ( e && e.stopPropagation ) 
    //因此它支持W3C的stopPropagation()方法 
    e.stopPropagation(); 
else 
    //否则，我们需要使用IE的方式来取消事件冒泡 
    window.event.cancelBubble = true; 
}

를 사용하면 됩니다. 기본 동작을 방지해야 할 경우

//阻止浏览器的默认行为 
function stopDefault( e ) { 
    //阻止默认浏览器动作(W3C) 
    if ( e && e.preventDefault ) 
        e.preventDefault(); 
    //IE中阻止函数器默认动作的方式 
    else 
        window.event.returnValue = false; 
    return false; 
}

이벤트 주의 포인트

를 사용하면 됩니다.

이벤트는 이벤트 개체 요소 트리거, 마우스 위치 및 상태, 누른 키 등과 같은 이벤트 상태를 나타냅니다.

이벤트 개체는 이벤트 중에만 유효합니다.

Firefox의 이벤트는 IE의 이벤트와 다릅니다. IE의 이벤트는 전역 변수이며 언제든지 사용할 수 있습니다. Firefox의 이벤트는 매개변수에 따라 안내될 때만 사용할 수 있으며 런타임 시 임시 변수입니다.
IE/Opera에서는 window.event이고, Firefox에서는 이벤트이며, 이벤트의 객체는 IE에서는 window.event.srcElement이고, Firefox에서는 event.target이며 둘 다 Opera에서 사용할 수 있습니다.

다음 두 문장은 동일한 효과를 갖습니다.

function a(e){
var e = (e) ? e : ((window.event) ? window.event : null); 
var e = e || window.event; // firefox下window.event为null, IE下event为null

이 기사의 사례를 읽으신 후 방법을 마스터하셨다고 생각합니다. 더 흥미로운 정보를 보려면 PHP 중국어 웹사이트의 다른 관련 기사를 주목하세요!