仅当禁用javascript时才使用链接

Question

我有一个大学社区的社交网站，运行良好。有一个功能可以点赞其他用户的帖子。点赞是使用javascript的onClick((函数触发的。

最近，由于安全原因，我们的许多成员禁用了javascript。

如果javascript被禁用，有什么方法可以将用户重定向到特定页面吗？否则，脚本应该可以工作。

对于更具描述性的细节，假设我当前的代码如下：

<a href="#" onclick="return likeFunction();">Item</a>

我想要的是：

<a href="www.mysite.com/postController/likeAction" onclick="return likeFunction();">Like</a>

**但是href只有在onclick((函数不起作用时才应该是活动的。有可能吗？**

我的网站是用php代码点火器构建的。有什么解决方案吗？

Answer 1

只需对onClick事件中调用的函数返回false。因此，要么确保likeFunction((返回false。或者，之后用onClick="likeFunction(); return false;"返回false。

通常，您应该始终在href中放置一个链接，而不是完全依赖JS。锚标记不应与onclick事件一起被滥用以创建伪按钮。如果href中没有链接，您可以考虑使用按钮标记。

此外，href应该从协议(http://www.example.com而不是www.example.com(开始。

附带说明：您可以考虑通过调用addEventListener而不是使用onClick属性来附加JS事件。使用这两种方法都有不同的利弊。我建议你看看这个答案：addEventListener vs onclick。

编辑：正如WillardSolutions建议的那样，您可以使用preventDefault来确保在调用onClick事件时不会打开链接。有关更多详细信息，我建议您看看这个答案：event.prventDefault((与return false

Answer 2

不要混淆HTML，只需使用JavaScript对其进行增强即可(请参阅：渐进增强(。这可以通过CSS类和文档选择器轻松实现。

给定HTML:

<a href="/postController/likeAction" class="like">Like</a>

您可以在</body>标签之前添加一个自执行JavaScript函数：

<script>
(function() {
document.querySelectorAll('a.like').forEach(function(item) {
item.removeAttribute('href');
item.onclick = function() {
/* add the likeFunction functionality here */
};
});
})();
</script>

这很基本；它循环遍历所有具有class="like"的<a>标记，删除href属性，并将当前likeFunction()中的功能添加到单击事件中(如果将代码从likeFunction()复制到指定位置(。

显然，如果禁用了JavaScript，DOM就不会更新，原始HTML也会保留在原来的位置。

---

注意：forEach()在Microsoft浏览器中的支持可能很粗略。

Answer 3

为什么不直接使用preventDefault()

// if js is disabled, this doesn't execute at all, 
// so the link will work by default and take the user to the url defined inside the `href` tag.
document.getElementById('myLink').addEventListener('click', function(e) {
e.preventDefault(); // This will tell the browser not to follow the link.
... Do Awesome stuff here all day long
});

演示