JavaScript 与无 JavaScript 链接和表单答案

【问题标题】：JavaScript vs No JavaScript links and formsJavaScript 与无 JavaScript 链接和表单
【发布时间】：2016-01-14 03:15:33
【问题描述】：

几天前我发了这个问题：

它是关于使链接适用于启用 JavaScript 的浏览器 (AJAX) 和非 JavaScript 浏览器或爬虫的普通链接。

现在我发现这种方法对我有用，并且也被 Google 推荐。我就是这样做的：

<a href="/some/page.php" onClick="jsfunction():return false">My Link</a>

现在我喜欢它的是它完全按照我需要的方式工作。但是如果我要使用带有 jQuery 的事件处理程序。我会这样做：

 <a href="/some/page.php" id="mylink">My Link</a>

<script>
  $("#mylink").live(\'click\', function(){
  my_function();
  }) 
</script>

我想知道如何防止我的页面在启用 JavaScript 并且不使用 onClick 事件时到达目标 /some/page.php，如前一种情况那样返回 false。

我也想知道如何对表单做同样的事情。当我单击提交按钮并启用 JavaScript 时，我不希望表单执行该操作。

我正在尝试创建一个可以使用和不使用启用 JavaScript 的浏览器的网站。唯一的区别是支持 JavaScript 的浏览器将使用 AJAX 而其他浏览器则不使用。

【问题讨论】：

【解决方案1】：

使用preventDefault()，像这样：

<script>
    $("#mylink").live('click', function(event) {
        event.preventDefault();
        my_function();
    });
</script>

请注意，您必须将event 作为function 的参数，此示例代码才能正常工作。另外，我不知道你为什么逃脱了'（也许这段代码是由另一个脚本生成的？），但除非你做一些奇怪的事情，否则你不需要它。

这部分在技术上不是你的答案，但它也很重要：live() is deprecated，正如 cmets 中所指出的那样。最好的方法是使用事件委托和on()，如下所示：

<script>
    $('body').on('click', '#mylink', function(event) {
        event.preventDefault();
        my_function();
    });
</script>

【讨论】：

【解决方案2】：

看来你应该使用方法event.preventDefault()。

【讨论】：