阻止錨標記跳轉

這是我在SO上的第一篇文章，我已經用了很長一段時間，總是通過搜索找到解決方案。現在我開始深入研究編程 - 現在正在學習Java腳本 - 並且我無法找到我的初學者問題的確切答案：阻止錨標記跳轉

我創建了一個簡單的照片庫，縮略圖指向圖像通過href。圖像默認情況下不顯示。通過點擊一個縮略圖，對應的圖像顯示得益於：target僞元素。通過這種方式，我可以繞過層次結構中更高級的HTML結構和地址元素的級聯特性。

見琴：

的問題是，這種「黑客」有把圖像窗口的最頂部的副作用，因爲它默認主播跳行爲。所以我想完成的是關閉或繞過只是的跳躍行爲。因此，像「preventDefault」或「return false」這樣的JS解決方案不適合，因爲它們會關閉完整的錨定行爲。我的想法是在點擊之前讀取yScroll位置，並將它傳遞給剛剛在頁面跳轉後觸發的另一個函數。通過錨標記上附加一個onclick事件中，我發現該功能的實際跳之前執行，我可以讀取當前scrollY位置：

function posY(){ 
    console.log(window.scrollY); 
    scry = window.scrollY; 
}

然後，錨事件結束後，我想通過變量占卜到另一個功能，只是錨後跳觸發撤消跳：

function undoJump(){ 
    window.scrollTo(0, scry); 
}

它並沒有真正與click事件工作作爲函數的實際跳轉之前觸發。

在小提琴的js代碼是在腳本標記，因爲不僅僅是使用功能到JS窗口（當然沒有腳本標記的）顯示在控制檯中的錯誤，我不知道爲什麼......

對不起，我真的是初學者，謝謝大家的幫助！

來源

2017-08-04 kipo87

https://jsfiddle.net/ahu1kaqf/1/

var classname = document.getElementsByClassName("thumb"); 
for (var i = 0; i < classname.length; i++) { 
    classname[i].addEventListener("click", posY); 
} 
function posY(e){ 
    e.preventDefault(); 
    console.log(window.scrollY); 
}

取出onclick，因爲它只是沒有做到這一點的最好辦法。向鏈接添加一個類，或者使用基於父類的querySelectorAll。這裏的好處是，您不必記得添加課程或onclick。它處理的代碼更少，管理更容易。

https://jsfiddle.net/ahu1kaqf/2/

在這兩種情況下，你可以停止e.preventDefault()正常活動的行爲;

對於第二部分，您可能只想在這種情況下設置全局。在全部功能之外設置一個全局功能，並通過點擊進行更改。你可能會變得更復雜一些，並且承諾等等，但是，老實說，設置一個全局值就很容易。儘量避免它們是很好的，但它們可以是簡單有用的解決方案，這取決於所討論的應用程序的整體複雜性。

來源

2017-08-04 22:51:28 Leeish

謝謝你的快速回答！ – kipo87

感謝您的快速回答！但由於preventDefault（），目標僞選擇器不再工作。通過點擊一個拇指，相應的圖像不會再顯示出來... – kipo87

好吧，明白了。我必須添加 document.getElementById（「img <對應數字>」）。style.display =「initial」; 在修復這個功能。在飛行中學習.... – kipo87

是的，您需要防止默認操作（這是導航操作）。

在現代瀏覽器，這意味着你可以做到這一點（注意我傳遞全局事件對象作爲參數）：

<a href="#img1" onclick="posY(event)"><div class="thumb">thumb1</div></a>

然後在你的JS代碼，你可以這樣做：

function posY(e){ 
     e.preventDefault() 
     console.log(window.scrollY); 
    }

來源

2017-08-04 22:52:26 Paul

阻止錨標記跳轉

回答

相關問題