首頁 > web前端 > js教程 > 如何防止點擊 JavaScript 連結時頁面滾動到頂部?

如何防止點擊 JavaScript 連結時頁面滾動到頂部?

DDD
發布: 2024-10-26 09:00:03
原創
366 人瀏覽過

 How to Prevent Page Scrolling to Top When Clicking JavaScript Links?

點擊JavaScript 觸發的連結時防止頁面捲動到頂部

點擊與JavaScript 事件關聯的連結時,例如:

<a href="#">My Link</a>
登入後複製

頁面可能會意外滾動到頂部。若要在保持連結功能的同時防止此行為,請考慮以下解決方案:

選項1:event.preventDefault()

利用事件物件的.preventDefault( ) 方法防止瀏覽器執行導覽至連結的預設操作。

<code class="javascript">$('#ma_link').click(function($e) {
    $e.preventDefault();
    doSomething();
});

document.getElementById('#ma_link').addEventListener('click', function (e) {
    e.preventDefault();
    doSomething();
})</code>
登入後複製

選項 2:傳回 false;

在 jQuery 中,從事件傳回 false handler 自動呼叫 event.stopPropagation() 和 event.preventDefault()。

<code class="javascript">$('#ma_link').click(function(e) {
     doSomething();
     return false;
});</code>
登入後複製

為了獲得更多瀏覽器相容性,請在使用原始 DOM 事件時明確呼叫 .preventDefault()。

以上是如何防止點擊 JavaScript 連結時頁面滾動到頂部?的詳細內容。更多資訊請關注PHP中文網其他相關文章!

來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板