`

html中,链接a的href和onclick

    博客分类:
  • JS
 
阅读更多

以前在写<A>的href和onclick一直很随意,今天无意中看到介绍这一块的网页,感觉很受用。

 

在Javascript中void是一个操作符,该操作符指定要计算一个表达式但是不返回值。

void 操作符用法格式如下: 
1. javascript:void (expression) 
2. javascript:void expression

expression 是一个要计算的 Javascript 标准的表达式。

表达式外侧的圆括号是选的,但是写上去是一个好习惯。 (实现版本 Navigator 3.0)

可以使用 void 操作符指定超级链接。

表达式会被计算但是不会在当前文档处装入任何内容。

 

下面的代码创建了一个超级链接,当用户点击以后不会发生任何事。

用户点击链接时,void(0) 计算为 0,但 Javascript 上没有任何效果。

 

<A HREF="javascript:void(0)">单此处什么也不会发生</A>

 

下面的代码创建了一个超级链接,用户点击时会提交表单。

<A HREF="javascript:void(document.form.submit())"> 
单此处提交表单</A>

 

下面代码则执行了subgo()函数,

<a href="javascript:void(0)" onclick="subgo()">点我</a>

 

在这里,javascript:void(0),没启实质上的作用,它仅仅是一个死链接,执行的函数是subgo()。

 

<a href="#" onclick="subgo()">点我</a>与<a href="javascript:void(0)" onclick="subgo()">点我</a>区别。

 

实际上 #包含了一个位置信息默认的锚是#top, 也就是网页的上端 ;

而javascript:void(0) 仅仅表示一个死链接,没有任何信息。

所以调用脚本的时候最好用void(0)。

 

 

href一般是指向一个URL地址,也可以调用javascript ,如href="javascript:xxx();",

文档中推荐这样写:<a href=" javascript:void(0)" onclick="xxx();">xx</a>,

但是这种方法在复杂环境有时会产生奇怪的问题,尽量不要用javascript:协议做为A的href属性,

这样不仅会导致不必要的触发window.onbeforeunload事件,在IE里面更会使gif动画图片停止播放。

 

我们知道链接的 onclick 事件被先执行,其次是 href 属性下的动作(页面跳转,或 javascript 伪链接),如果不想执行href 属性下的动作执行,onclick 需要要返回 false ,一般是这样写onclick="xxx();return false;"。

 

 

 

 

 

 

 

 

分享到:
评论

相关推荐

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

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

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

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

    html超链接a标签的href跳转跟onclick之间执行顺序示例介绍

    如描述中所述,`onclick`事件和`href`跳转之间的执行顺序是这样的:首先,`onclick`事件的JavaScript代码会被执行。如果`onclick`函数返回`false`,则浏览器将阻止默认的`href`跳转行为,即不会导航到`href`属性指定...

    jquery A标签onclick事件

    serverListObj.append("&lt;li&gt;&lt;a href='#' name='servers' onclick='GetServer(this)'&gt;" + areaList[0] + "&lt;/a&gt;&lt;/li&gt;"); GetServer("&lt;a href='#' name='servers' onclick='GetServer(this)'&gt;" + areaList[0] + "&lt;/a&gt;...

    a标签的href与onclick事件的区别详解

    总之,`&lt;a&gt;`标签的`href`和`onclick`属性在HTML中各有其用途。`href`主要用于定义链接的目标,而`onclick`则用于添加额外的交互逻辑。理解它们之间的关系和用法对于编写高效、健壮的前端代码至关重要。在实际开发中...

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

    `&lt;a&gt;`标签有两个关键属性,即`href`和`onclick`,它们都可以用来控制页面的跳转行为,但具体使用方式和效果有所不同。 1. `href`属性:`href`属性是`&lt;a&gt;`标签的核心属性,用于定义链接的目标URL。当用户点击这个...

    a标签的href和onclick 的事件的区别介绍

    总结起来,`href`和`onclick`在`&lt;a&gt;`标签中的主要区别在于: 1. `href`定义链接的目标,负责页面间的导航。 2. `onclick`是JavaScript事件,允许在点击时执行自定义的JavaScript代码。 3. 在`onclick`和`href`同时...

    a标签href属性和onclick事件的比较介绍

    最后,关于&lt;a&gt;标签的href属性和onclick事件的使用,还涉及到HTML标准和浏览器兼容性的问题。在不同的浏览器中可能会有细微的差别,因此在开发过程中进行充分的测试是非常必要的。总之,正确地使用href属性和onclick...

    html超级链接a的click事件之后跳转href所指向的地址

    在描述中,提到了一种常见的做法是使用`&lt;a&gt;`标签但不设置`href`属性,或者将其设置为`#`,然后通过`onClick`事件绑定一个JavaScript函数,如`&lt;a href="#" onClick="fun()"&gt;点击&lt;/a&gt;`。这样做可以避免页面跳转,但在...

    onclick锚点定位

    在网页设计中,"onclick锚点定位"是一种常见的交互技术,它允许用户通过点击按钮或链接,快速跳转到页面内的特定位置。这种技术主要基于HTML的锚点(Anchor)元素和JavaScript的onclick事件,结合CSS来实现页面右侧...

    HTML a 标签.docx

    HTML a 标签是 HTML 中最基本也是最常用的标签之一,它用于定义锚点,可以创建指向其他文档的链接,也可以创建文档内部的书签。下面我们将详细介绍 HTML a 标签的定义、用法、属性和实例。 定义和用法 -------- ...

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

    1. a href=”[removed]js_method();” rel=”external nofollow” 这种方法在传递this等参数的时候很容易出问题,而且[removed]协议作为a的href属性的时候不仅会导致不 必要的触发[removed]事件,在IE里面更会使gif...

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

    在Web开发过程中,我们经常会遇到需要通过HTML标签来触发JavaScript函数的需求,其中最常见的就是使用`&lt;a&gt;`标签。本文将详细介绍如何在`&lt;a&gt;`标签中调用JavaScript方法,并对每种方法进行深入分析。 #### 一、常规...

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

    &lt;a href="#" onclick="handleClick(); return false;"&gt;这是会跳到页首的&lt;/a&gt; &lt;a href="javascript:void(0);" onclick="handleClick();"&gt;这个不会跳跃&lt;/a&gt; &lt;/html&gt; ``` ### 总结 - **选择依据**:选择哪种...

    a href=javascript void(0) 是什么意思呢?加不加上有什么区别?.docx

    在HTML中,`a`标签是用来创建超链接的,而`href`属性则定义了链接的目标地址。在实际开发过程中,有时我们会遇到`a href="javascript:void(0)"`这样的写法。本文将详细介绍这一特殊用法的意义以及它与`a href="#"`...

    [removed].href = [removed].href 跳转无反应 a超链接onclick事件写法

    总的来说,理解`window.location.href`的工作原理以及如何正确地与`&lt;a&gt;`标签的`onclick`事件结合使用,是解决此类问题的关键。通过使用`javascript:void(0)`和控制`onclick`事件的行为,我们可以确保在各种情况下都...

    Js实现当前点击a标签变色突出显示其他a标签回复原色

    &lt;a href="#" onclick="changeCss(this)"&gt;链接1&lt;/a&gt; &lt;a href="#" onclick="changeCss(this)"&gt;链接2&lt;/a&gt; &lt;a href="#" onclick="changeCss(this)"&gt;链接3&lt;/a&gt; ``` 2. 编写changeCss函数,该函数遍历所有a标签,将它们的...

Global site tag (gtag.js) - Google Analytics