Prevent Default

<!DOCTYPE html>
<html>

  <head>
    <meta charset="utf-8">
    <title>Prevent Default</title>
    <link rel="stylesheet" href="style.css">
  </head>

  <body>
    <h1>How to prevent default behavior</h1>
  
    <h4>Following hyperlink is not going to open bing.com</h4>
    <a id="a1" href="http://www.bing.com" target="_blank">Open Bing</a>
    
    <br/>
    <h4>Following input box can not be typed in charactor</h4>
    
    <input id="input1" type="text">
    
    <script src="script.js"></script>
  </body>

</html>

(function(win, doc){
  'use strict';
  
  var a1 = doc.getElementById('a1');
  var input1 = doc.getElementById('input1');
    
  if(win.addEventListener){
      //`return false` will not work since no support on it
      a1.addEventListener('click', function(e){
        e.preventDefault();
      }, false);
    
      input1.addEventListener('keydown', function(e){
        e.preventDefault();
      }, false);
  }
  
  if(win.attachEvent){//IE <= 10
      //you can use `return false` instead in IE
      a1.attachEvent('onclick', function(e){
        e.returnValue = false;
      });

      input1.attachEvent('onkeydown', function(e){
        e.returnValue = false;
      });
  }
  
}(this, document));

#outer1{
  width: 300px;
  height: 300px;
  background-color: red;
  color: #fff;
  position: relative;
  text-align: center;
}

#outer2{
  top: 50%;
  position: absolute;
  margin-top: -75px;
  margin-left: 75px;
  width: 150px;
  height: 150px;
  background-color: blue;
}

#outer3{
  top: 50%;
  left: 0;
  position: absolute;
  margin-top: -25px;
  margin-left: 50px;
  width: 50px;
  height: 50px;
  background-color: yellow;
  color: #000;
}