버블링을 중지하고 js에서 브라우저 기본 동작을 방지하는 방법

 <br>

이벤트 호환

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();
}

버블링 방지

w3c의 메서드는 e.stopPropagation()이고 IE는 e.cancelBubble = true

stopPropa를 사용합니다. 게이트는 또한 이벤트 객체(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>

위의 데모는 테스트를 클릭하면 경고("li"), 경고("ul"), 경고("div")가 순차적으로 발생합니다. 이것이 이벤트 버블링입니다. .

• 버블링 테스트

버블링 중지

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

• 버블링 중지

기본 동작 차단

w 3c의 메소드는 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를 사용하여 기본 동작을 방지하고 버블링을 중지합니다

//code from 
<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;
});

데모: 버블링 중지 및 기본 동작 방지

• caibaojian.com

사용 요약

버블링 동작을 중지해야 할 때 사용할 수 있습니다.

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; 
}

이벤트 주의 포인트

1. 이벤트는 이벤트 개체를 트리거한 요소, 마우스 위치 및 상태, 누른 키 등 이벤트의 상태를 나타냅니다.
   이벤트 대상은 이벤트 기간에만 유효합니다.

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

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

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

 <br/>

위 내용은 버블링을 중지하고 js에서 브라우저 기본 동작을 방지하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!