Question

我在这里有一个测试页：http://www.problemio.com/test.php

如果按“Click To Test Signup”，您将收到一份表格。如果在该表单上，您单击“登录”，它会识别您单击该表单，并打开登录表单。

但问题是，在登录表单上，如果按“创建配置文件”，它实际上会转到href标记的url而不是jQuery click事件。

我的问题是这样做的最佳做法是什么？我发现了一种叫做“防止默认行为”的东西，但不知道应该如何/何时使用它。

我猜测如果用户已禁用JS，他们仍然可以登录。如何设置它以便用户可以首先以jQuery方式登录和创建帐户，如果他们有默认方式JS已禁用？

谢谢！

Answer 1

你可以用纯粹的jQuery和

来做到这一点

 $("#createprofilelink").click(function(event) {
      event.preventDefault();
      {create profile logic}
 });

有关详细信息，请参阅jQuery文档http://api.jquery.com/event.preventDefault/

编辑：我删除了这个因为@maxedison注释它停止了jQuery事件的触发但是我刚刚测试了这个并且jQuery事件触发但链接没有转到该地址。 / p>

 <a id="thelink" href="http://www.google.com" onclick="return false;">the link</a>
 <script>
      $('#thelink').click(function(){alert('alert me');});
 </script>

至于JS被禁用的部分问题，链接真的应该指向一个真实的表格来填写，正如Taryn East正确说的那样，所以即使用户体验较低而不使用，用户也会获得相同的功能的JavaScript。

你甚至可以沿着noscript路线前进

  <noscript>
        <div>Your user experience would be far improved if you 
        enable JavaScript but if you insist, 
        <a href="{real link}">Click Here to create your profile</a></div>            
  </noscript>

Answer 2

要解决链接gazumping问题，确实如@kamui所说，使用return false;

但至于你的JS禁用问题 - 将href指向一个真实的URL - ＆gt;优选地与启用JS的东西相同的URL - 或相同的形式，但在新窗口中。

Answer 3

由于我这边的防火墙限制，我无法关注链接，但是......

你会想要使用一种名为unobtrusive javascript的东西。

http://en.wikipedia.org/wiki/Unobtrusive_JavaScript

这意味着如果JS可用，它将使用它，如果不继续作为普通的html工作。

使用jQuery，您首先将click事件附加到$ .Ready（）方法中的按钮。

<a id='btnTest' href='login.html' />

$(document).ready(function () {
        // Attach click event to btnTest
        $("#btnTest").click(function (e) { 
                          // do logic
return false; // Returning false here will stop the link from following login.html.
});
    });

希望这有帮助。

jQuery点击无法识别

3 个答案: