函数调用后停止网页跳回顶部

Question

我正在使用 ViewBag 将列表传递给视图。然后，我在列表中使用 foreach 将列表中的每个字符串一一显示为 href。我有一个功能，允许用户单击每个 href 以将其从列表中删除。问题是，当用户单击 href 以将其从列表和视图中删除时，网页会跳回顶部。有什么办法可以阻止这种情况吗？例如当用户单击以从列表中删除 href 字符串时，页面将保持原位

edit.cshtml

<div class="form-group" style="min-height: 100px">
    <div class="col-md-10" style="min-height: 100px">
        <hr />
        <p><strong>Flagged Questions</strong></p>
        @foreach (var item in ViewBag.FLagList)
        {
        <div>
            <a href="#" onclick="this.parentNode.parentNode.removeChild(this.parentNode)">@item</a>
        </div>
        }
    </div>
</div>

功能

<script>
    function onDelete(elm, id) {
    // Do something with id
    console.log(id)
    elm.parentNode.removeChild(elm)
}
</script>

Answer 1

您需要从锚标记中删除`href 属性 然后您可以为锚点提供自定义 css 以恢复由于删除 href att 而丢失的样式。

 <a class='custom-link' onclick="this.parentNode.parentNode.removeChild(this.parentNode)">@item</a>

.custom-link:link {
  background-color: yellow;
}

.custom-link:visited {
  background-color: cyan;
}

.custom-link:hover {
  background-color: lightgreen;
}

.custom-link:active {
  background-color: hotpink;
} 

Answer 2

在你的函数执行后，会触发href="#" 的链接。使用event.preventDefault() 来防止这种情况发生。

function myFunction(event, val) {
  console.log(val);
  event.preventDefault();
}

<a href="#" onclick="myFunction(event, 'myValue')">Click me</a>