Question

2017-04-29

357

javascript html css

我有一个页面，其中包含多个叠加层，所有叠加层均由带有的 javascript 脚本触发。

效果很好，但有一个例外：单击链接时页面会跳转。我知道我可以为每个页面添加一个锚标记，并基本上控制页面跳转到的位置，但这不是我的偏好。

我也知道我可以使用 href="javascript:void(0)" 来更正此问题，但我的小组不希望在用户将鼠标悬停在链接上时显示 javascript:void(0)。

那么，我在这里有什么选择？除了 href="#" 之外，我可以在标记中使用其他语法吗？

或者，如果我使用 javascript:void(0) 或 javascript:null 来解决问题，是否有办法控制浏览器显示的文本？

或者还有其他解决方法？

Answer 1

如果您不想要链接，请不要使用带有 href 属性的 A 元素。使用 span 并根据需要设置其样式，或者使用按钮。

function whatever() {
  console.log('You clicked me!');
}

.linkLike {
  cursor: pointer;
  text-decoration: underline;
  color: blue;
}

<span class="linkLike" onclick="whatever()">Click me</span>

Answer 2

您可以在事件处理程序中使用 e.preventDefault(); 。

document.getElementById('link').addEventListener('click', function(e) {
  e.preventDefault();
  console.log('click');
});

<a href="http://www.google.com" id="link">click</a>