title: How can I prevent href redirect onclick
body: <p>I have a div what acts like a button(.butt), when I click it, It should prevent a href from redirecting and open a input. It dosent work, it still redirects and when I go back from redirection the input appears, but when I press the input it still redirects. </p>
  
  <p>How can I make it so that when I press my div it disables the redirection and lets my insert a value into input to change the value?</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>var x;
  var h = 0; // blur fires multiple times, use h to count and fire once
  var url = 'up.php';
  
  $(".butt").on('click', function(event) { 
  event.preventDefault();
  $(".tk").on('click', function(d) { 
   d.stopPropagation();
   var x = $(d.target); 
   x.html('&lt;input  id="edit2" style="width: 40px;" value="'+x.text()+'"&gt;'); 
   var this_id = x.context.id;
   
   $("#edit2").on('blur', function(d) { 
    if (h &lt; 1) {
     h = h+1;
     d.stopPropagation();
     
     $(d.target.parentElement).text(d.target.value);
     
     $.get(url,  {id: this_id, value: d.target.value})
      .done(function(d){ if(d == undefined || d != 1) { alert('Something went wrong, check your data and results. '+d);}})
      .fail(function(d){ alert('error');});
     $("#edit2").off('blur');
    }
    
    
   }); 
   h = 0;
  });
  });</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.butt{width:15px;height:15px; background-color:red;border-radius: 50%;}</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"&gt;&lt;/script&gt;
  &lt;div class="butt"&gt; &lt;/div&gt;
  &lt;a href="http://www.google.com" class="tk"&gt;click&lt;/a&gt;</code></pre>
  </div>
  </div>
  </p>