Как я могу предотвратить перенаправление 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) { 
 
\t d.stopPropagation(); 
 
\t var x = $(d.target); 
 
\t x.html('<input id="edit2" style="width: 40px;" value="'+x.text()+'">'); 
 
\t var this_id = x.context.id; 
 
\t 
 
\t $("#edit2").on('blur', function(d) { 
 
\t \t if (h < 1) { 
 
\t \t \t h = h+1; 
 
\t \t \t d.stopPropagation(); 
 
\t \t \t 
 
\t \t \t $(d.target.parentElement).text(d.target.value); 
 
\t \t \t 
 
\t \t \t $.get(url, {id: this_id, value: d.target.value}) 
 
\t \t \t \t .done(function(d){ if(d == undefined || d != 1) { alert('Something went wrong, check your data and results. '+d);}}) 
 
\t \t \t \t .fail(function(d){ alert('error');}); 
 
\t \t \t $("#edit2").off('blur'); 
 
\t \t } 
 
\t \t 
 
\t \t 
 
\t }); \t 
 
\t 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(); 
 
\t d.stopPropagation(); 
 
\t var x = $(d.target); 
 
\t x.html('<input id="edit2" style="width: 40px;" value="'+x.text()+'">'); 
 
\t var this_id = x.context.id; 
 
\t 
 
\t $("#edit2").on('blur', function(d) { 
 
\t \t if (h < 1) { 
 
\t \t \t h = h+1; 
 
\t \t \t d.stopPropagation(); 
 
\t \t \t 
 
\t \t \t $(d.target.parentElement).text(d.target.value); 
 
\t \t \t 
 
\t \t \t $.get(url, {id: this_id, value: d.target.value}) 
 
\t \t \t \t .done(function(d){ if(d == undefined || d != 1) { alert('Something went wrong, check your data and results. '+d);}}) 
 
\t \t \t \t .fail(function(d){ alert('error');}); 
 
\t \t \t $("#edit2").off('blur'); 
 
\t \t } 
 
\t \t 
 
\t \t 
 
\t }); \t 
 
\t 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>