`
wzucxd
  • 浏览: 26583 次
  • 性别: Icon_minigender_1
  • 来自: 杭州
文章分类
社区版块
存档分类
最新评论

a标签中的href,onclick,#,javascript:void简要分析

 
阅读更多

在开发过程中,经常会使用测试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) 是什么意思呢?加不加上有什么区别?.docx

    在实际开发过程中,有时我们会遇到`a href="javascript:void(0)"`这样的写法。本文将详细介绍这一特殊用法的意义以及它与`a href="#"`之间的区别。 #### 一、`javascript:void(0)` 的含义 `javascript:void(0)` 是...

    javascript;与javascriptvoid(0)使用介绍

    这种方式常用于直接在HTML元素(如`&lt;a&gt;`标签)的`href`属性中执行JavaScript代码。 **基本用法:** ```html &lt;a href="javascript:alert('Hello World!');"&gt;点击我&lt;/a&gt; ``` 这段代码会在用户点击链接时弹出一个包含...

    js中javascript-void(0) 真正含义.docx

    &lt;a href="javascript:void(0)" onclick="openWin(3, this)"&gt;株洲&lt;/a&gt; function openWin(tag, obj) { obj.target = "_blank"; obj.href = "Web/Substation/Substation.aspx?stationno=" + tag; obj.click(); ...

    空链接 href="#"与href="javascript-void(0)"的区别.docx

    ### 空链接 `href="#"` 与 `href="javascript:void(0)"` 的区别 在Web开发中,经常会遇到需要创建空链接的情况,这些链接主要用于页面内的导航或者是触发某些JavaScript事件,而不是真正的跳转到另一个页面。在HTML...

    js中 javascript-void(0) 用法详解.docx

    例如,在 AJAX 调用之前或之后执行某些逻辑处理时,可以通过设置 `&lt;a&gt;` 标签的 `href` 属性为 `javascript:void(0)` 来避免不必要的页面跳转或刷新。 #### 六、总结 - **`void(0)`** 主要用于执行某些处理,同时...

    javascript-void(0)是什么意思?JS的几种跳转.docx

    在HTML中,`&lt;a href="#"&gt;`和`&lt;a href="javascript:void(0)"&gt;`这两个链接看起来很相似,但实际上存在重要的区别: - `#`表示页面内部的锚点,即指向页面内部的一个特定位置,默认情况下指向页面顶部(`#top`)。 - `...

    IE6下javasc#ipt:void(0) 无效的解决方法

    在JavaScript编程中,`void(0)` 是一个常见的语法,用于定义一个链接(`&lt;a&gt;`标签)点击后不执行任何操作,即阻止链接的默认行为。它等同于 `javascript:`伪协议后面的表达式结果为0,通常用于防止页面跳转。然而,这...

    javascript的命令大全(打印,下载,收藏,使用 记事本 编辑等)

    &lt;a href="#" onclick="document.execCommand('open')"&gt;打开&lt;/a&gt; ``` ### 二、查看源代码(View Source Code) #### 命令格式: ```javascript location.replace("view-source:" + location); ``` #### 描述: 此...

    a标签中调用js中的方法的方法

    综上所述,虽然有多种方式可以在`&lt;a&gt;`标签中调用JavaScript方法,但推荐使用`&lt;a href="javascript:void(0);" onclick="js_method();&gt;`或`&lt;a href="javascript:;" onclick="js_method();&gt;`,它们兼顾了代码简洁性、...

    设为主页跳转代码大全

    3. **需要阻止链接默认行为时**:可以考虑使用`&lt;a href="javascript:void(0);" onclick="javascript:goUrl('http://www.sina.com'); return false;"&gt;`的方式。 ### 四、注意事项 1. **避免过度使用JavaScript**: ...

    详解a href=#与 a href=[removed]void(0) 的区别

    在HTML中,`&lt;a&gt;`标签通常用于创建超链接,而`a href="#"`和`a href="javascript:void(0)"`是两种常见的用法,它们之间有着显著的区别。 首先,`a href="#"`是一个指向页面内部锚点的链接。默认情况下,`#`代表页面...

    详解a标签添加onclick事件的几种方式

    &lt;a href="javascript:void(0)" onclick="js_method();" rel="external nofollow"&gt;点击我&lt;/a&gt; ``` 这是最常用的实现方式,`void(0)`返回`undefined`,阻止页面跳转。同时,它不会像方法1那样将JavaScript方法暴露在...

    详解Html a标签中href和onclick用法、区别、优先级别

    综上所述,`href`和`onclick`在`&lt;a&gt;`标签中分别负责链接跳转和JavaScript交互。在设计交互时,要根据需求选择合适的属性,并注意事件处理的顺序和阻止默认行为,以确保在不同浏览器中保持一致的行为。在需要传递`...

    a标签href属性与onclick事件使用实例

    在`&lt;a&gt;`标签中,`onclick`事件可以用来执行JavaScript代码,包括页面跳转。例如: ```html &lt;a onclick="window.location.href='https://www.jb51.net'"&gt;我们&lt;/a&gt; ``` 这里,点击"我们"后,JavaScript代码`window....

    [removed]void(0)是什么意思及href=#与href=javascriptvoid(0)的区别

    &lt;a href="javascript:void(0)" onclick="yourFunction()"&gt;调用函数链接&lt;/a&gt; ``` 在某些情况下,`javascript:void(0)`可能在Internet Explorer中导致问题,比如停止GIF动画的播放。为避免这种情况,可以考虑使用`#`...

    网页设计常用的Javascript特效代码

    &lt;a href="javascript:doZoom(14)"&gt;中&lt;/a&gt; &lt;a href="javascript:doZoom(12)"&gt;小&lt;/a&gt; ``` 此段代码定义了一个`doZoom`函数,该函数接收一个参数`size`,用于设置元素的字体大小。通过调用`document.getElementById('...

    A标签中通过href和onclick传递的this对象实现思路

    总结来说,当需要在`&lt;a&gt;`标签中同时使用`href`和`onclick`时,推荐使用`onclick`配合`return false`或`addEventListener`来传递`this`对象,以确保它指向正确的元素。这样,你就可以在处理函数中方便地访问和操作`&lt;a...

    html中a标签调用js函数.docx

    本文将详细探讨如何在`&lt;a&gt;`标签中调用JavaScript函数以及相关注意事项。 1. **JavaScript: 协议调用** 这种方法常见于老代码中,如`&lt;a href="javascript:js_method()"&gt;`, 但它有一些问题。首先,传递参数时容易...

    制作网页时的23个经典代码.txt

    根据提供的文件信息,我们可以推断出这是一份包含23个在网页制作过程中经常用到的经典代码片段的文档。虽然原文中的部分内容不完整且存在乱码情况,但是根据标题、描述以及部分可见的内容,我们可以尝试总结和扩展...

Global site tag (gtag.js) - Google Analytics