美文网首页
a标签的href与页面跳转的默认行为

a标签的href与页面跳转的默认行为

作者: lincimy | 来源:发表于2017-05-05 16:22 被阅读0次

概念

a标签的默认跳转链接行为是由href来实现的,同时设置href属性可以使a标签在hover状态下以手指指示的样式显示。但实际过程中发现对a标签的href属性的不同设置,可能会导致不同的行为反馈,故想要进行几种不同的设置情况总结一下。

1.a标签中设置href属性,没有赋任何值

<a href></a>

点击a标签会刷新页面,回到顶部。

2.a标签中设置href属性,赋值href="#"

<a href='#'></a>

点击a标签后会回到页面顶部,但不刷新页面。

3.a标签中设置href属性,其中赋值使用javascript语句,另外设置onclick点击事件

<a href='javascript:viod(0)' onclick="go()"></a>

javascript:viod(0)语句控制页面不进行跳转也不进行刷新,点击之后也不会回到页面顶部,使用javascript代码阻止了href属性的默认跳转链接行为。a标签点击后会执行onclick中设定函数go()。

4.a标签中设置href属性,但赋值使用javascript语句,另外设置onclick点击事件

<a href='javascript:return false' onclick="go()"></a>

此方法与上一种方法实现效果类似,一样是href属性中执行js代码,使用return false告诉浏览器要阻止href属性的默认行为,如跳转链接,刷新页面,回到顶部等,此方法依然可执行go()函数。

5.a标签中设置href属性但不进行赋值,设置onclick点击绑定事件

<a href onclick="go()"></a>

点击a标签,会触发点击绑定事件,执行函数go()的相关操作,但同时也会由于href的设置进行页面的刷新,当执行绑定事件的操作函数,在完成之前或者执行过程中进行了页面刷新,对应的页面结果也会被重新刷新,并且回到页面顶部。

相关文章

  • a标签的href与页面跳转的默认行为

    概念 a标签的默认跳转链接行为是由href来实现的,同时设置href属性可以使a标签在hover状态下以手指指示的...

  • preventDefault与stopPropagation的作

    1.preventDefault :就是阻止系统默认行为,可以阻止a标签的默认行为,比如href跳转链接e.pre...

  • day29-JavaScript运用

    一、添加删除标签 1.阻止a标签默认行为的方法 a标签有默认的跳转页面的行为,有两种方法可以阻止它的默认行为。 1...

  • js 实现跳转页面& 强制刷新页面

    js实现跳转页面 通过a标签跳转 location对象的href属性 通过open方法 强制刷新页面

  • HTML常用标签

    a 标签的用法 属性 href 跳转外部页面 跳转内部锚点 跳转到邮箱或者打电话 target 指定页面在哪里打开...

  • Vue - 路由(vue-router)

    什么是路由? 网络页面与页面跳转,实现的都是 标签, 标签里面有属性href,给它定义一个网络地址或者路径的...

  • 点击跳转页面

    点击跳转页面: 类似a标签: onclick="localtion.href='www.baidu.com'"

  • HTML中空元素&a标签介绍

    a标签的介绍 链接 用户点击直接跳转到指定页面href的其他属性介绍:1、href="//qq.com" ...

  • JavaScript DOM编程艺术读后感

    禁用a标签默认跳转行为 禁止 标签的默认跳转行为,可以再onclick函数里面添加return false,来达到...

  • 【a标签的使用和属性】

    a标签的使用 属性(属性值) 1、href(需要跳转到哪个页面)(存放跳转的地址url) 2、target(打开目...

网友评论

      本文标题:a标签的href与页面跳转的默认行为

      本文链接:https://www.haomeiwen.com/subject/dpfstxtx.html