A的href和onclick

本文详细阐述了a标签中href与onclick事件的使用方式及其区别,包括如何利用void(0)避免页面刷新,以及在不同浏览器环境下的注意事项。通过实例解析,帮助开发者更好地理解和应用这一知识点。

在a标签的href与onclick中使用javascript的区别


⒈ 链接的 onclick 事件被先执行,其次是 href 属性下的动作(页面跳转,或 javascript 伪链接);

⒉ 假设链接中同时存在 href 与 onclick,如果想让 href 属性下的动作不执行,onclick 必须得到一个 false 的返回值;

⒊ 如果页面过长有滚动条,且希望通过链接的 onclick 事件执行操作。应将它的 href 属性设为 javascript:void(0);,而不要是 #,这可以防止不必要的页面跳动;

⒋ 如果在链接的 href 属性中调用一个有返回值的函数,当前页面的内容将被此函数的返回值代替;

⒌ 在按住Shift键的情况下会有所区别。

⒍ 在IE6.0里以href的形式访问不到parentNode。尽量不要用javascript:协议做为A的href属性,这样不仅会导致不必要的触发window.onbeforeunload事件,在IE里面更会使gif动画图片停止播放。就这些,花了不少时间在这上面。


(IE6下)

<a href="javascript:void(0);" onclick="javascript:modifypassword();"><img src="images/blue/Modify.gif"/></a>

此种写法IE6下面URL虽然请求了后台,但是前台没有动静,

正确的写法应该为

<a href="javascript:void(0);" onclick="javascript:modifypassword();return false;"><img src="images/blue/Modify.gif"/></a>

个人收藏的几个例子,供大家学习一下:
1:<a href="####"></a>
2:<a href="javascript:void(0)"></a>
3:<a href="javascript:void(null)"></a>
4:<a href="#" onclick="return false"></a>
5:<span style="cursor:hand"></span>(好像在FF中不能显示)-------------------------------------------------------------------------------

慎用JavaScript:void(0)今天测试的时候,明明程序已经执行,并且最后结果也是正确的,但是页面就是不刷新。

在FireFox2.0和ie7下测试,结果却是正常的,IE6却偏偏不刷新!仔细调查了一下,发现页面链接的是 <a href="javaScript:void(0)" OnClick="XXX_Func();" ….> 测试 </a>,问题就出在这个void(0)上!

让我们先来看看JavaScript中void(0)的含义:JavaScript中void是一个操作符,该操作符指定要计算一个表达式但是不返回值。
void 操作符用法格式如下:
1. javascript:void (e-xpression)
2. javascript:void e-xpression
e-xpression是一个要计算的 JavaScript 标准的表达式。表达式外侧的圆括号是可选的,但是写上去是一个好习惯。我们可以使用 void 操作符指定超级链接。表达式会被计算但是不会在当前文档处装入任何内容。面的代码创建了一个超级链接,当用户点击以后不会发生任何事。当用户点击链接时,void(0) 计算为 0,但在 JavaScript 上没有任何效果。<a href="javascript:void(0)">单击此处什么也不会发生</a>也就是说,要执行某些处理,但是不整体刷新页面的情况下,可以使用void(0),但是在需要对页面进行refresh的情况下,那就要仔细了。其实我们可以这样用<a href="javascript:void(document.form.submit())">,这句话会进行一次submit操作。那什么情况下用void(0)比较多呢,无刷新,当然是Ajax了,看一下Ajax的web页面的话,一般都会看到有很多的void(0),:) ,所以在使用void(0)之前,最好先想一想,这个页面是否需要整体刷新。


前端`a`标签中`href`属性与`onclick`事件里`window.open`存在多方面区别: - **功能本质**:`a`标签的`href`属性是用于指定链接的目标地址,当用户点击`a`标签时,浏览器会根据该属性值加载新的页面或者资源,其操作主要围绕当前窗口或指定的目标窗口(如`target="_blank"`)进行页面跳转;而`window.open`是 JavaScript 的一个方法,用于打开一个新的浏览器窗口或者标签页,并在其中加载指定的 URL [^1]。 - **窗口处理**:`a`标签的`href`属性默认情况下会在当前窗口中打开链接,除非设置了`target="_blank"`等属性才会在新窗口打开;`window.open`则可以灵活控制新窗口的大小、位置等参数,并且默认就是打开新窗口 [^1]。 - **使用场景**:`a`标签的`href`属性适合用于常规的页面间跳转,是 HTML 中链接的标准实现方式;`window.open`适用于需要动态生成链接、控制新窗口特性,或者在特定交互逻辑中打开新页面的场景,比如在用户点击某个按钮后根据条件打开不同的链接 [^1]。 当`a`标签的`href`属性与`onclick`事件里的`window.open`一起使用时,可能会出现以下问题: - **事件冲突**:如果`onclick`事件中没有阻止默认行为(如使用`event.preventDefault()`),那么`onclick`里的`window.open`执行后,`href`属性也会触发,导致同时打开两个页面,一个是`window.open`打开的新窗口,另一个是`href`属性指定的页面在当前窗口或指定目标窗口打开。 - **用户体验不佳**:同时打开多个窗口可能会让用户感到困惑,影响用户体验,尤其是在没有明确提示的情况下。 - **浏览器兼容性问题**:不同浏览器对`a`标签的`href`属性`onclick`事件的处理可能存在细微差异,在某些旧版本浏览器中可能会出现意外的行为。 以下是示例代码: ```html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <!-- 没有阻止默认行为的情况 --> <a href="https://example.com" onclick="window.open('https://another-example.com')">点击我</a> <!-- 阻止默认行为的情况 --> <a href="https://example.com" onclick="window.open('https://another-example.com'); event.preventDefault();">点击我</a> </body> </html> ```
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值