Href = "#" Scrollen Sie nicht

Question

Ich bin ziemlich neu in JS - also frage mich nur, ob Sie wissen, wie Sie dieses Problem lösen.

Aktuelle ich in meinem Code

<a href='#' class="closeLink">close</a> 

haben, die einige JS läuft eine Box zu schließen. Das Problem, das ich habe, ist, dass wenn der Benutzer auf den Link klickt - der href = "#" den Benutzer an den Anfang der Seite bringt, wenn dies passiert.

Wie zu lösen, damit es dies nicht tut? d. h. ich kann nicht etwas wie onclick = "return false" verwenden, da ich mir vorstelle, dass das JS daran hindern wird zu arbeiten?

Dank

Answer 1

Der üblicher Weg, dies zu tun, ist von Ihren Javascript Click-Handler false zurück. Dadurch wird verhindert, dass das Ereignis aufsteigt und die normale Aktion des Ereignisses abgebrochen wird. Es ist meine Erfahrung, dass dies in der Regel das gewünschte Verhalten ist.

jQuery Beispiel:

$('.closeLink').click(function() { 
     ...do the close action... 
     return false; 
}); 

Wenn Sie die normale Aktion einfach verhindern möchten, können Sie stattdessen einfach preventDefault verwenden.

$('.closeLink').click(function(e) { 
    e.preventDefault(); 
    ... do the close action... 
}); 

Answer 2

Wenn Ihr Code eventgeben bekommen Sie preventDefault() verwenden könnte; Falsch zurückgeben hilft auch.

mylink.onclick = function(e){ 
e.preventDefault(); 
// stuff 
return false; 
} 

Answer 3

return false ist die Antwort, aber ich tun dies in der Regel statt:

$('.closeLink').click(function(event) { 
     event.preventDefault(); 
     ...do the close action... 
}); 

Stoppt die Aktion geschieht, bevor Sie Ihren Code ausführen.

Answer 4

Obwohl es sehr populär zu sein scheint, ist href = '#' kein magisches Schlüsselwort für JavaScript, es ist nur eine normale Verbindung zu einem leeren Anker und als solches ist es ziemlich sinnlos. Sie haben grundsätzlich zwei Möglichkeiten:

1. eine alternative Implementierung mit JavaScript-fähigen nicht bewusst User Agents, verwenden Sie die href Parameter, um es zu zeigen und die Verbindung mit JavaScript abzubrechen. ZB:

   <a href="close.php" onclick="close(); return false">

2. Wenn die noscript Alternative nicht verfügbar oder relevant ist, müssen Sie nicht einen Link überhaupt benötigen:

   <span onclick="close(); return false">Close</span>

Answer 5

Wickeln Sie ein div Aussage Um einen Link zu verlinken, muss der Link false zurückgegeben werden, fügen Sie die JavaScript-Funktion zum div on click hinzu ...

<div onClick="javascript:close();"> 
    <a href="#" onclick="javascript:return false;">Close</a> 
</div> 

Answer 6

JavaScript-Version:

myButton.onclick=function(e){ 
    e.preventDefault(); 
    // code 
    return false; 
} 

jQuery-Version:

$('.myButtonClass').click(function(e){ 
    e.preventDefault(); 
    // code 
    return false; 
}); 

Das tun nur die gut Arbeit geleistet! :)

Answer 7

Der einfachste Weg, dieses Problem zu lösen, ist nur ein weiteres Zeichen nach dem Rautenzeichen hinzufügen, wie folgt aus:

<a href='#a' class="closeLink">close</a> 

Problem gelöst. Ja, so einfach war es. Manche mögen diese Antwort hassen, aber sie können nicht leugnen, dass es funktioniert.

Stellen Sie sicher, dass Sie keinen Abschnitt zugewiesen haben, der "a" zugeordnet ist, sonst wird dieser Teil der Seite angezeigt. (Ich sehe das aber nicht so oft, wie ich es gewohnt bin) "#" allein geht standardmäßig zum Anfang der Seite.

Answer 8

Sorry für die späte Antwort, aber niemand erwähnte dies. Machen Sie einfach <a>Do Stuff</a> ohne href und fügen Sie dem Element den Stil cursor: pointer hinzu. Dann können Sie jeden Klick-Ereignis mit jquery verwalten als

$(document).ready(function(){ 
 
    $("#Element").click(function(){ 
 
    alert("Hello"); 
 
    //Do Stuff 
 
    }) 
 
});

#Element { 
 
    cursor: pointer; 
 
} 
 
#Element:hover { 
 
    color: #00f; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> 
 

 
<a id="Element">Do Stuff</a>

Answer 9

Eine Option für Sie folgt, ist nicht href = "#" zu verwenden, sondern stattdessen href = "javascript:;" dies ermöglicht es Ihnen, die Onclick-Handler zu laufen, während nicht scrollen.

Für Beispiel

<a href="javascript:;" onclick="doSomething()">Do Something</a>