[Java教程]jQuery的click事件在当前页弹出层窗口(不打开新页面)

0 2015-10-24 15:00:04

当给链接添加一个click事件，我们可能不希望Web浏览器按照其常规模式退出当前页面并通过新页面载入链接的目的地，而是在当前页弹出层窗口(不打开新页面)。例如，当单击了一个缩略图上的链接时，页面会载入一幅较大的图像。通常，单击链接会退出页面并在一个空白页面上显示图像本身的较大版本。然而，在这个例子中，停留在同一页面，较大的图像在这里载入，而不是按照链接打开图像。

有几种方法可以阻止链接按照其惯例进行工作，可以返回一个false值或使用jQuery的preventDefault()函数。例如，假设有一个链接把访问者带到一个登录页面。为了让站点给人感觉更具有响应性，当访问者单击该链接的时候，我们希望使用JavaScript来显示一个登录页面。换句话说，如果访问者的链接支持JavaScript，当他单击了该链接，该页面上将会出现一个表单；如果浏览器关闭了JavaScript，单击链接将会把访问者带到一个登录页面。

实现这一目标有几个步骤：

1.选择登录链接。

2.附加一个click事件。

可以使用jQuery的click()函数触发鼠标事件来做到这点。click()函数接收另一个函数作为参数。这个函数包含了当用户单击链接时发生的步骤。在这个例子中，只需要两个步骤。

3.显示登录表单。

当页面载入的时候，登录表单应该隐藏不可见，可能是位于链接之下的一个绝对定位的＜div＞标签。可以使用show()函数或者jQuery的其他显示效果之一来显示该表单。

4.停止链接。

这是最重要的一步。如果没有停止链接，Web浏览器将直接离开当前页面而载入登录Web页面。

下面是如何使用“返回false”的方法来停止链接起作用。假设该链接的I D为showForm并且隐藏的带有登录表单的＜div＞标签拥有一个ID为loginForm：$('#showForm').click(function(){

$('#loginForm').fadeIn('slow')；

return false；

})；

第1行完成上述步骤1和步骤2的任务，第2行显示了隐藏的表单。第3行告诉浏览器“停下来，不要打开这个链接”。宅男社必须让return false；语句作为该函数的最后一行，因为一旦JavaScript解释器遇到了返回语句，它就会退出函数。

也可以使用jQuery的preventDefault()函数，如下所示：$('#showForm').click(function(evt){

$('#loginForm').fadeIn('slow')；

evt.preventDefault()；

})；

这个脚本的基本细节和前面的一个相同。主要区别在于，分配给click事件的函数现在接收一个参数：evt，它表示事件本身。事件有其自己的一组函数和属性，preventDefault()函数直接停止了和事件相关的任何默认行为：对于链接上的一次单击，它载入一个新的Web页面。

转载请注明出处：http://www.uphtm.com/js/171.html

本文网址：http://www.shaoqun.com/a/151793.html

*特别声明：以上内容来自于网络收集，著作权属原作者所有，如有侵权，请联系我们：admin@shaoqun.com。

jquery

0