如何防止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

event.preventDefault（）方法停止發生元素的默認操作。

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>