Detaillierte Erklärung von js zur Verhinderung von Blasenbildung und Standardereignissen (Standardverhalten)-js-Tutorial-php.cn

Detaillierte Erklärung von js zur Verhinderung von Blasenbildung und Standardereignissen (Standardverhalten)

高洛峰

Freigeben： 2016-12-09 15:23:50

Original

1345 Leute haben es durchsucht

Das Beispiel in diesem Artikel teilt Ihnen js mit, um Blasenbildung zu verhindern, und Standardereignismethoden als Referenz. Der spezifische Inhalt lautet wie folgt:

Verhindern Sie Blasenbildung. Ein einfaches Beispiel für Sprudeln ist, dass der Sohn eine geheime Botschaft kennt und es seinem Großvater erneut erzählt. Die stufenweise Übermittlung führt zu Verwirrung, was dem Sohn nicht gestattet ist Sag es seinem Vater. Natürlich werde ich es Opa nicht erzählen. Der Domo unten ist ein gutes Beispiel.

<!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>

Nach dem Login kopieren

Der Effekt, den ich erzielt habe, ist: Klicken Sie auf die Schaltfläche btn, um das Feld anzuzeigen, und klicken Sie auf eine andere Stelle, um das Feld verschwinden zu lassen.
Wenn ich das Blasen nicht verhindere, löst die erste BTN die Klickzeit aus, um die Box anzuzeigen. Da die Box jedoch im Dokument enthalten ist, wird sie sprudeln und das Klickereignis des Dokuments auslösen Das Feld verschwindet. Die Ausführungssequenz dieses Ereignisses kann mithilfe von Warnungen in verschiedenen Klickereignissen überprüft werden. In Bezug auf die Kompatibilitätsverarbeitung von cancelBubble ist in höheren Versionen von Chrome und Firefox keine Kompatibilitätsverarbeitung mehr erforderlich. Sie können oEvent.cancelBubble = true direkt verwenden. Die folgende Kompatibilitätsverarbeitung zur Verhinderung von Browserereignissen ist in höheren Browserversionen ebenfalls nicht erforderlich.

Standardereignis. Das heißt, die Funktionalität des Browsers selbst.

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

Nach dem Login kopieren

Dies ist eine Kompatibilitätsschreibweise, aber wenn Sie nur Browser höherer Versionen unterstützen müssen, reicht wie oben nur ein Satz aus.

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

Nach dem Login kopieren