保留mouseover属性的href="#"替代方案

Question

我有一个很长的HTML页面，在模态框打开时，页面会滚动到顶部，可以通过从“＃”中删除href =“＃”来解决这个问题。

<a href="#" id="myId">Click me to open modal</a>

但是如果移除它，会改变锚点标签上的“手型”鼠标悬停显示为“文本闪烁器”。

我如何去掉href="#"而不失去该属性？

- Saurav Sood

Answer 1

设置

cursor:pointer;

在<a>元素上

- Akshay

---

使用按钮代替没有href属性的锚点。 - Quentin

Answer 2

选项1：

选项1：

替换为：

<a href="#" id="myId">Click me to open modal</a>

尝试：

<a href="javascript:void(0);" id="myId">Click me to open modal</a>

这将把<a>标签视为真正的锚点，具有默认CSS样式，但不会执行默认链接行为，即导致浏览器滚动到顶部。

选项2：在javascript中使用event.preventDefault()来防止浏览器滚动到顶部。

选项3：完全删除href属性，并在CSS中添加cursor:pointer。

- Dale Harris

---

@GiacomoPaita 我基本上同意，但在像这样具有模态窗口的情况下，通常没有语义上适当的目标，也没有将URL路由存储在浏览器历史记录中的原因。 - Dale Harris

谢谢您提供详细的描述，让我清楚了很多事情，并提供了其他可用的选项。 - Saurav Sood

没问题。这个主题还有很多内容。如果你感兴趣，这里有一个更深入探讨这个问题的另一个StackOverflow问题。 - Dale Harris

Answer 3

你可以通过在JS中设置event.preventDefault()来阻止锚点的默认行为。

我不知道你的代码是怎样的，但这里有一个jQuery 例子：

<a href="http://jquery.com">default click action is prevented</a>
<div id="log"></div>


<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
<script>
 $( "a" ).click(function( event ) {
   event.preventDefault();
   $( "<div>" )
     .append( "default " + event.type + " prevented" )
     .appendTo( "#log" );
});
</script>

- Giacomo Paita

Answer 4

如果您想打开一个空链接，请使用URL："about:blank"

- Nicolò Favaretto