在开发过程中,经常会使用测试1<a href='#' onclick='fun();return false;'/>这种方式来触发javascript事件而不改变当前链接.
或者测试2<a href="javascript:void(0)" onclick="return true;">测试2</a>这种方式来建立死链接。但是只要看过a href=”《javascript:void(0);” — avoid the void》和《How to Create Pop-Up Windows》这2篇文章后就能发现,作者更赞同使用测试1的方式而不是测试2,我也是认同作者的观点。
在web标准中也是不建议使用测试2的方式的,但是测试2javascript:void(0)伪协议也会有bug存在,会使gif动画停止播放。
在测试2的案例中,我们还能看到,点击事件触发的时候(调用顺序:onclick->window.onbeforeunload->href),而测试1却没有,这是因为void运算符在执行之前会调用window.onbeforeunload方法
对于void运算符(void只做运算,返回结果为undefined),所以在调用到href时遇到void运算符的时候,可能就会产生一些bug
但是使用测试1的方式href='#' onclick中加上return false,也会存在问题,导致点击链接页面返回顶部,这是由于#号默认锚点为#top,点击后重新定位到top锚点位置,当然可以自己再重新定义一个top锚点,但是这也不能很好解决问题,仍然也存在定位不准。有些朋友喜欢使用####来替换#(#一般为2到6个,大多都取4个)。无论#几个都是会存在这个bug的,原因同上。
点击链接导致页面返回顶部也可以采用span标签替换a标签来解决,但是还可以不改变标签,只需讲#用#this替换即可解决问题,也可以采用其它锚点
<a href='#this' onclick='fun();return false;'/>
另:当window.onbeforeunload中return false的时候将会有意想不到的收获。提示“确实要离开页面吗?确定...取消...”
分享到:
相关推荐
在实际开发过程中,有时我们会遇到`a href="javascript:void(0)"`这样的写法。本文将详细介绍这一特殊用法的意义以及它与`a href="#"`之间的区别。 #### 一、`javascript:void(0)` 的含义 `javascript:void(0)` 是...
这种方式常用于直接在HTML元素(如`<a>`标签)的`href`属性中执行JavaScript代码。 **基本用法:** ```html <a href="javascript:alert('Hello World!');">点击我</a> ``` 这段代码会在用户点击链接时弹出一个包含...
<a href="javascript:void(0)" onclick="openWin(3, this)">株洲</a> function openWin(tag, obj) { obj.target = "_blank"; obj.href = "Web/Substation/Substation.aspx?stationno=" + tag; obj.click(); ...
### 空链接 `href="#"` 与 `href="javascript:void(0)"` 的区别 在Web开发中,经常会遇到需要创建空链接的情况,这些链接主要用于页面内的导航或者是触发某些JavaScript事件,而不是真正的跳转到另一个页面。在HTML...
例如,在 AJAX 调用之前或之后执行某些逻辑处理时,可以通过设置 `<a>` 标签的 `href` 属性为 `javascript:void(0)` 来避免不必要的页面跳转或刷新。 #### 六、总结 - **`void(0)`** 主要用于执行某些处理,同时...
在HTML中,`<a href="#">`和`<a href="javascript:void(0)">`这两个链接看起来很相似,但实际上存在重要的区别: - `#`表示页面内部的锚点,即指向页面内部的一个特定位置,默认情况下指向页面顶部(`#top`)。 - `...
在JavaScript编程中,`void(0)` 是一个常见的语法,用于定义一个链接(`<a>`标签)点击后不执行任何操作,即阻止链接的默认行为。它等同于 `javascript:`伪协议后面的表达式结果为0,通常用于防止页面跳转。然而,这...
<a href="#" onclick="document.execCommand('open')">打开</a> ``` ### 二、查看源代码(View Source Code) #### 命令格式: ```javascript location.replace("view-source:" + location); ``` #### 描述: 此...
综上所述,虽然有多种方式可以在`<a>`标签中调用JavaScript方法,但推荐使用`<a href="javascript:void(0);" onclick="js_method();>`或`<a href="javascript:;" onclick="js_method();>`,它们兼顾了代码简洁性、...
3. **需要阻止链接默认行为时**:可以考虑使用`<a href="javascript:void(0);" onclick="javascript:goUrl('http://www.sina.com'); return false;">`的方式。 ### 四、注意事项 1. **避免过度使用JavaScript**: ...
在HTML中,`<a>`标签通常用于创建超链接,而`a href="#"`和`a href="javascript:void(0)"`是两种常见的用法,它们之间有着显著的区别。 首先,`a href="#"`是一个指向页面内部锚点的链接。默认情况下,`#`代表页面...
<a href="javascript:void(0)" onclick="js_method();" rel="external nofollow">点击我</a> ``` 这是最常用的实现方式,`void(0)`返回`undefined`,阻止页面跳转。同时,它不会像方法1那样将JavaScript方法暴露在...
综上所述,`href`和`onclick`在`<a>`标签中分别负责链接跳转和JavaScript交互。在设计交互时,要根据需求选择合适的属性,并注意事件处理的顺序和阻止默认行为,以确保在不同浏览器中保持一致的行为。在需要传递`...
在`<a>`标签中,`onclick`事件可以用来执行JavaScript代码,包括页面跳转。例如: ```html <a onclick="window.location.href='https://www.jb51.net'">我们</a> ``` 这里,点击"我们"后,JavaScript代码`window....
<a href="javascript:void(0)" onclick="yourFunction()">调用函数链接</a> ``` 在某些情况下,`javascript:void(0)`可能在Internet Explorer中导致问题,比如停止GIF动画的播放。为避免这种情况,可以考虑使用`#`...
<a href="javascript:doZoom(14)">中</a> <a href="javascript:doZoom(12)">小</a> ``` 此段代码定义了一个`doZoom`函数,该函数接收一个参数`size`,用于设置元素的字体大小。通过调用`document.getElementById('...
总结来说,当需要在`<a>`标签中同时使用`href`和`onclick`时,推荐使用`onclick`配合`return false`或`addEventListener`来传递`this`对象,以确保它指向正确的元素。这样,你就可以在处理函数中方便地访问和操作`<a...
本文将详细探讨如何在`<a>`标签中调用JavaScript函数以及相关注意事项。 1. **JavaScript: 协议调用** 这种方法常见于老代码中,如`<a href="javascript:js_method()">`, 但它有一些问题。首先,传递参数时容易...
根据提供的文件信息,我们可以推断出这是一份包含23个在网页制作过程中经常用到的经典代码片段的文档。虽然原文中的部分内容不完整且存在乱码情况,但是根据标题、描述以及部分可见的内容,我们可以尝试总结和扩展...