버블링을 방지하는 js 및 기본 이벤트에 대한 자세한 설명(기본 동작)-JS 튜토리얼-php.cn

버블링을 방지하는 js 및 기본 이벤트에 대한 자세한 설명(기본 동작)

高洛峰

풀어 주다： 2016-12-09 15:23:50

원래의

1343명이 탐색했습니다.

본 글의 예시는 버블링 방지를 위한 js와 참고용 기본 이벤트 메소드를 공유합니다.

버블링 방지. 버블링의 간단한 예는 아들이 비밀 메시지를 알고 아버지에게 말하는 것인데, 아버지는 그것을 알고 할아버지에게 다시 말하는 것입니다. 물론 할아버지에게는 말하지 않겠습니다. 아래의 도모가 좋은 예입니다.

<!DOCTYPE html> 
<html> 
  
  <head> 
    <meta charset="UTF-8"> 
    <title></title> 
    <style type="text/css"> 
      #box { 
        width: 300px; 
        height: 300px; 
        background: red; 
        display: none; 
      } 
    </style> 
    <script type="text/javascript"> 
      window.onload = function() { 
          var btn = document.getElementById(&#39;btn&#39;); 
          var box = document.getElementById(&#39;box&#39;); 
          btn.onclick = function(ev) { 
            var oEvent = ev || event; 
            box.style.display = &#39;block&#39;; 
            //oEvent.cancelBubble = true;//高版本浏览器 
            stopBubble(oEvent); 
            //在低版本的chrome和firefox浏览器中需要兼容性处理 
            //高版本chrome和firefox浏览器直接使用上面这行代码即可 
          } 
          document.onclick = function() { 
            box.style.display = &#39;none&#39;; 
          } 
  
        } 
        //阻止冒泡事件的兼容性处理 
      function stopBubble(e) { 
        if(e && e.stopPropagation) { //非IE 
          e.stopPropagation(); 
        } else { //IE 
          window.event.cancelBubble = true; 
        } 
      } 
    </script> 
  </head> 
  
  <body> 
    <input type="button" id="btn" value="语言" /> 
    <div id="box"></div> 
  </body> 
  
</html>

로그인 후 복사

내가 얻은 효과는 btn 버튼을 클릭하면 상자가 나타나고 다른 곳을 클릭하면 상자가 사라지는 것입니다.
버블링을 방지하지 않으면 먼저 btn이 상자를 표시하기 위해 클릭 시간을 트리거합니다. 그러나 상자가 문서에 포함되어 있으므로 버블링이 발생하고 문서의 클릭 이벤트가 트리거됩니다. 상자가 사라집니다. 이 이벤트의 실행 순서는 다양한 클릭 이벤트의 경고를 통해 확인할 수 있습니다. cancelBubble의 호환성 처리와 관련하여 Chrome 및 Firefox 상위 버전에서는 더 이상 호환성 처리가 필요하지 않습니다. oEvent.cancelBubble = true를 직접 사용할 수 있습니다. 브라우저 이벤트를 방지하기 위해 다음과 같은 호환성 처리도 상위 버전의 브라우저에서는 필요하지 않습니다.

기본 이벤트입니다. 즉, 브라우저 자체의 기능입니다.

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

로그인 후 복사

호환적인 작성 방식이지만 상위 버전의 브라우저만 지원해야 한다면 위와 같이 한 문장이면 충분합니다.

btn.onclick = function (){
  return false;
}

로그인 후 복사