仅在禁用 javascript 时使用链接答案

【问题标题】：Use a link ONLY when javascript is disabled仅在禁用 javascript 时使用链接
【发布时间】：2019-04-23 02:25:18
【问题描述】：

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

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

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

为了更详细的描述，假设我当前的代码是这样的：

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

我想要的是这样的：

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

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

我的网站是用 php codeigniter 构建的。有什么解决办法吗？

【问题讨论】：

在每个<a>标签中添加正确的链接，在你的JS中，使用preventDefault()覆盖href
不怎么使用javascript。但猜测标签可能会有所帮助。让我研究一下，如果我能提供帮助，我会告诉你
摆脱@WillardSolutions 提到的内容，您还可以在函数中添加return false 以覆盖。
onclick 是一种非常老式的将事件处理程序附加到 HTML 元素的方法。最好使用 addEventListener （或包装它的框架）以编程方式添加它们。顺便说一句，这不是 PHP 问题。请不要错误地标记问题。

标签： javascript codeigniter-3 noscript

【解决方案1】：

只需在 onClick 事件中调用的函数上返回 false。所以要么确保 likeFunction() 返回 false。或者，之后使用 onClick="likeFunction(); return false;" 返回 false。

一般来说，您应该始终在 href 中放置一个链接，而不是完全依赖 JS。锚标记不应该是 abused with the onclick event 来创建伪按钮。如果不需要在 href 中放置链接，您可以考虑使用按钮标签。

此外，href 应该以协议开头（http://www.example.com 而不是www.example.com）。

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

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

【讨论】：

【解决方案2】：

不要弄乱您的 HTML，只需使用 JavaScript 增强它（请参阅：Progressive Enhancement）。这可以通过 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()支持可能是sketchy in Microsoft browsers。

【讨论】：

【解决方案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

});

DEMO

【讨论】：