昨天做修改页面跳转时遇到一个问题,如果a标签的"href"属性为空的话,比如这样<a href="" onclick="roleupdate()">修改</a>,这时当我点击修改链接时并没有给我跳到对应修改页面,而是只在本页面进行了刷新操作;如果写成<input type="button" onclick="roledelete()" value="修改">,点击完全没有反应。后来和同事讨论后发现改为<a href="javascript:void(0)" onclick="roleupdate()">修改</a>,即在"href"属性中添加"javascript:void(0)"或者"#"即可以实现页面的跳转,所以个人认为"a"标签中的"href"属性值不应该为空。

  为了便于大家学习,本人整理了几种在"a"标签中使用点击事件的方法,如下所示:

  1. <a href="JavaScript:js_method();"</a>

这是我们平台上常用的方法,但是这种方法在传递this等参数的时候很容易出问题,而且javascript:协议作为a的href属性的时候不仅会导致不必要的触发window.onbeforeunload事件,在IE里面更会使gif动画图片停止播放。W3C标准不推荐在href里面执行javascript语句

  2. <a href="javascript:void(0);" onclick="js_method()"</a>

这种方法是很多网站最常用的方法,也是最周全的方法,onclick方法负责执行js函数,而void是一个操作符,void(0)返回undefined,地址不发生跳转。而且这种方法不会像第一种方法一样直接将js方法暴露在浏览器的状态栏。

  3.<a href="javascript:;" onclick="js_method()"</a>

这种方法跟2种类似,区别只是执行了一条空的js代码。

  4.<a href="#" onclick="js_method()"</a>

这种方法也是网上很常见的代码,#是标签内置的一个方法,代表top的作用。所以用这种方法点击后网页后返回到页面的最顶端。

  5.<a href="#" onclick="js_method();return false;"</a>

这种方法点击执行了js函数后return false,页面不发生跳转,执行后还是在页面的当前位置。

我看了下taobao的主页,他们采用的是第2种方法,而alibaba的主页是采用的第1种方法,和我们的区别是每个href里的javascript方法都用try、catch包围。

关于在"a"标签中添加点击事件的一些问题的更多相关文章

  1. a标签中的点击事件

    我们常用的在a标签中有点击事件:1. a href="javascript:js_method();" 这 是我们平台上常用的方法,但是这种方法在传递this等参数的时候很容易出问 ...

  2. bootstrap table 生成的表格里动态添加HTML元素按钮,JS中添加点击事件,点击没反应---解决办法

    bootstraptable中onExpandRow属性---js  方法添加的 html代码,然后给这代码里面的 元素 添加 事件,却获取不该元素.(称之为未来元素),由于是未来的 所以现在没有这个 ...

  3. Jquery为DIV添加点击事件,Jquery为a标签超链接添加点击事件

    <div>1</div> <div>2</div> <div>3</div> <div>4</div> ...

  4. [Swift通天遁地]一、超级工具-(1)动态标签:给UILabel文字中的Flag和url添加点击事件

    ★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★➤微信公众号:山青咏芝(shanqingyongzhi)➤博客园地址:山青咏芝(https://www.cnblogs. ...

  5. ThinkPHP框架下,给jq动态添加的标签添加点击事件移除标签

    jq移除标签主要就是$("#要移除的id").remove();不再赘述,这里要提醒的是jq中动态添加标签后怎样添加点击事件.一般的jq添加点击事件是用这种方法$("#i ...

  6. ECharts问题--散点图中对散点添加点击事件

    1. 我们这次就没有先讲解怎么使用散点图了,这个跟之前的一些图还是很类似的,不会的可以去官网上面查看 API 使用.我们这次讲解的是为散点图中的散点添加点击事件,然后在图表之外的一个 div 里面显示 ...

  7. iOS开发小技巧 - label中的文字添加点击事件

    Label中的文字添加点击事件 GitHub地址:https://github.com/lyb5834/YBAttributeTextTapAction 以前老师讲过类似的功能,自己懒得回头看了,找了 ...

  8. IOS开发中如何给UIImageView添加点击事件

    1.先创建一个UIImageView控件: photeImageView = [[UIImageView alloc]init]; photeImageView.frame = CGRectMake( ...

  9. a标签添加点击事件

      a标签添加点击事件 CreateTime--2017年8月8日09:11:34 Author:Marydon 一.基础用法 方式一:(不推荐使用) <a href="javascr ...

随机推荐

  1. hibernate 三种状态的转换

    一.遇到的神奇的事情 使用jpa操作数据库,当我使用findAll()方法查处一个List的对象后,给对这个list的实体进行了一些操作,并没有调用update 或者 saveOrUpdate方法,更 ...

  2. 深入解读Python的unittest并拓展HTMLTestRunner

    unnitest是Python的一个重要的单元测试框架,对于用Python进行开发的同事们可能不需要对他有过深入的了解会用就行,但是,对于自动化测试人员我觉得是要熟知unnitest的执行原理以及相关 ...

  3. nodejs npm常用命令 转

    npm是一个node包管理和分发工具,已经成为了非官方的发布node模块(包)的标准.有了npm,可以很快的找到特定服务要使用的包,进行下载.安装以及管理已经安装的包. 1.npm install m ...

  4. 用webstorm自动编译less产出css和sourcemap

    css产出sourcemap有什么用呢,可能大家要问这个问题了. 请移步这里 https://developers.google.com/chrome-developer-tools/docs/css ...

  5. 解决win10 关键错误开始菜单和cortana无法工作 的问题(转-真的成功了)

    问题描述: 一次强制关机后出现了这个对话框,注销.重启均无法解决问题 解决过程[因为我用的英文版操作系统,所以截图都是英文,请大家自行对照自己的操作系统]: 1.ctrl+alt+del 打开任务管理 ...

  6. 更全面的聊聊PRINCE2是什么

    1 什么是PRINCE2®? PRINCE2是一个非专有方法,已在全世界超过150个国家广泛使用,采用它的组织正在与日俱增. 它被广泛认为是项目管理的领先方法,超过2万个组织已经从其开创性的可信方法中 ...

  7. Linux shell指令运行的原理

    shell是一种命令行解释器 对于一般用户,我们不能直接使用操作系统(kernel).而是通过 kernel的"外壳"程序,也就是所谓的shell,来与kernel沟通.    为 ...

  8. cat: can't open '/lib/modules/2.6.35.3-571-gcca29a0/modules.dep': No such file or directory

    在使用modprobe 或者modinfo  cat: can't open '/lib/modules/2.6.35.3-571-gcca29a0/modules.dep': No such fil ...

  9. POPTEST学员就业面试题目!!!!!

    POPTEST学员就业面试题目!!!!!   poptest是国内唯一一家培养测试开发工程师的培训机构,以学员能胜任自动化测试,性能测试,测试工具开发等工作为目标.(欢迎大家咨询软件测试工程师就业培训 ...

  10. dubbo个人总结

    dubbo,分布式服务框架,RPC服务框架. 注册中心zk,redis......,使用大多为zk 注册流程 最后一图 服务提供者启动时向/dubbo/com.foo.BarService/provi ...