如何防止 href 重定向 onclick

Question

我有一个 div 类似于按钮 (.butt)，当我单击它时，它应该可以防止 href 重定向并打开输入。它起作用了，它仍然重定向，当我从重定向返回时，输入出现，但是当我按下输入时，它仍然重定向。

我怎样才能做到，当我按下 div 时，它会禁用重定向并让我在输入中插入一个值来更改值？

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('<input  id="edit2" style="width: 40px;" value="'+x.text()+'">'); 
 var this_id = x.context.id;
 
 $("#edit2").on('blur', function(d) { 
  if (h < 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;
});
});

.butt{width:15px;height:15px; background-color:red;border-radius: 50%;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="butt"> </div>
<a href="http://www.google.com" class="tk">click</a>

Answer 1

您可以使用 preventDefault

The event.preventDefault() method stops the default action of an element from happening.

d.preventDefault();

var x;
var h = 0; // blur fires multiple times, use h to count and fire once
var url = 'up.php';

$(".butt").on('click', function(d) { 
$(this).on("click", function(){return false;})
$(".tk").on('click', function(d) { 
    d.preventDefault();
 d.stopPropagation();
 var x = $(d.target); 
 x.html('<input  id="edit2" style="width: 40px;" value="'+x.text()+'">'); 
 var this_id = x.context.id;
 
 $("#edit2").on('blur', function(d) { 
  if (h < 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;
});
});

.butt{width:15px;height:15px; background-color:red;border-radius: 50%;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="butt"> </div>
<a href="http://www.google.com" class="tk">click</a>

如何防止 href 重定向 onclick

How can I prevent href redirect onclick

html

javascript

jquery

redirect

href