HTML / JQuery如何同時使用href和onclick？

Question

我被分配去在一個有很多按鈕的網頁上工作。 這些按鈕中的每個按鈕都需要向下滾動到特定的div並更改其內容。 我的問題是，每次單擊時，除非我移除href，否則它只會錨定並且不會激活oncl​​ick。 如何同時使用href和onclick？

例：

<a href="#divId" onclick="alert('Test');"><img src="images/image.png" /></a>

Answer 1

如果您從onclick返回true，它將執行href。 如果從onclick返回false，則不會執行href：

<a href="#divId" onclick="alert('Do nothing'); return false;">Do Nothing</a>

<a href="#divId" onclick="alert('Do something'); return true;">Do Href</a>

Answer 2

一種方法是在javascript中也跳轉到位置。 好處是您可以選擇發生的順序。 在這種情況下，您可以根據需要在移動到新位置后顯示警報。

您可以編寫如下函數：

function jumpTo(strLocTag){
    window.location.hash = strLocTag;
}

然后像這樣修改HTML：

<a href="#" onclick="jumpTo('divId');alert('Test');"><img src="images/image.png" /></a>

Answer 3

嘗試創建一個具有兩者的onclick調用函數，因此當您單擊它時，它將執行您在此處試圖實現的所有功能，然后將您重定向到您指向的網址

window.location.replace("~/Page.aspx#divId");

Answer 4

您也可以使用一個函數來保持HTML干凈

<a href="#divId" onclick="extra(); return false;"><img src="images/image.png" /></a>

在您的javascript文件中

function extra(){
    alert("Test");
    window.location.replace("http://stackoverflow.com");
}

Answer 5

如果是我，我將只使用onClick方法執行所有操作，而不必考慮href部分。

首先，onClick方法可以完成您想做的事情，然后向下滾動到anchor標簽。 這是我使用jQuery編寫的一個函數，用於使用錨標記在頁面上平滑滾動。 這就是我將如何使用它：

function smoothScroll(anchorName, scrollSpeed) {

    // Do whatever you were going to have in the onClick event here

    // Start the scrolling to the anchor tag
    var gotoAnchor = "a[name='" + anchorName + "']";
    var scrollToPoint = $(gotoAnchor).offset().top;
    $('html, body').animate({ scrollTop: scrollToPoint }, scrollSpeed);
}

然后，要使用該函數，只需取出鏈接的href並將此函數放在onClick事件中：

<a href="javascript:void(0)" onclick="smoothScroll('divId', 400);"><img src="images/image.png" /></a>