讨论 <a>标签中,href和onclick事件的顺序与冲突问题。

  首先明确一点:链接的onclick 事件被先执行,其次是href属性下的动作(页面跳转,或 javascript 伪链接);

  其次:

  1. 如果链接中同时存在href 与onclick,如果想让href 属性下的动作不执行,onclick 必须得到一个false的返回值;

    <a href="http://www.baidu.com" onclick="return false">单击此处不会执行href下的动作</a> 
  2. 如果页面过长有滚动条,且希望通过链接的 onclick 事件执行操作。应将它的 href 属性设为 javascript:void(0);,而不要是 #,这可以防止不必要的页面跳动;
  3. 如果在链接的 href属性中调用一个有返回值的函数,当前页面的内容将被此函数的返回值代替;
  4. 在按住Shift键的情况下会有所区别。
  5. 今天我遇到的问题,在IE6.0里以href的形式访问不到parentNode。
  6. 尽量不要用javascript:协议做为A的href属性,这样不仅会导致不必要的触发window.onbeforeunload事件,在IE里面更会使gif动画图片停止播放。

  

  关于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;".

<a>标签的href和onclick属性的更多相关文章

  1. <a>标签的href和onclick属性【转】

    1链接的onclick 事件被先执行,其次是href属性下的动作(页面跳转,或 javascript 伪链接): 2假设链接中同时存在href 与onclick,如果想让href 属性下的动作不执行, ...

  2. <a>标签的href、onclick属性

    链接的 onclick 事件被先执行,其次是 href 属性下的动作(页面跳转,或 javascript 伪链接): 参考:https://www.cnblogs.com/happykakeru/ar ...

  3. Html A标签中 href 和 onclick 同时使用的问题 优先级别

    我们在制作网页的时候用得最多的就是 A 标签 超连接 但有时候需要在 A 里同时用到 href 和 onclick属性 下面我们先来分析一下 ,在不同的浏览器下有不同的效果 1 顺序 ie 6 : h ...

  4. Html A标签中 href 和 onclick用法、区别、优先级别

    原文:Html A标签中 href 和 onclick用法.区别.优先级别 如果不设置 href属性在IE6下面会不响应hover.双击后会选中标签的父容器而非这个一a标签(IE下都存在这一问题). ...

  5. A标签中 href 和 onclick用法、区别、优先级别

    (内容摘自:https://blog.csdn.net/chenchunlin526/article/details/77346049) Html A标签中 href 和 onclick 同时使用的问 ...

  6. 超链接a标签的href与onclick中使用javascript的区别

    onclick中javascript的区别一般没用到都没注意,但出错时才有些郁闷,看文本章解释如下: 以前一直很随意,后来看.net里的linkbutton似乎是用在<a href=" ...

  7. <a>标签的href 与 onclick 使用

    链接的onclick 事件被先执行,其次是href属性下的动作(页面跳转,或 javascript 伪链接): 假设链接中同时存在href 与onclick,如果想让href 属性下的动作不执行,on ...

  8. a标签的href和onclick

    1.链接的onclick事件被先执行,href的事件后执行 2.就今天遇到的问题说一下,通过a标签的onclick事件实现点击后定位到指定的div,或者是执行其他函数(比如弹出artdialog等), ...

  9. html的a标签的 href 和 onclick。

    主要用于给超链接添加点击事件. aa.html <html> <body> <span>this si</span> </body> < ...

随机推荐

  1. C# winform应用程序仅能打开一个进程运行

    判断程序是否已经运行,使程序只能运行一个实例: 方法1: //这种检测进程的名的方法,并不绝对有效.因为打开第一个实例后,将运行文件改名后,还是可以运行第二个实例. private static bo ...

  2. anjularjs 路由

    在多视图单页面web应用中,angularjs使用路由‘#+标记’来区别不同的逻辑页面并将不同的页面绑定到对应的控制器上.通过一个简单的实例来深入理解: 1.index.html 主页面中插入代码: ...

  3. excel曲线拟合怎么弄

    在做社会调研或科学实验时常常需要把得到的实验数据拟合成曲线图,这样可以使结果形象易懂.下面将介绍怎么用excel来快速地进行曲线拟合.包括添加平滑曲线,线性,指数,幂,多项式(如二次曲线,三次曲线.. ...

  4. Linux为什么卡住了?

    导读 通过SSH登录Linux服务器时,输完用户名就卡住了,要等待10秒钟才提示密码输入.这究竟是什么原因导致的呢? 10秒钟的时间并不算长,吃个薯片喝口咖啡就过去了.但是作为强迫症患者,我还是容不得 ...

  5. 开发问题(C#)

    1. 重新引入dll文件之后,显示黄色感叹号,可能的原因:dll文件受损或者dll版本与工程Framework版本不一致. 2. 错误 232 无法将文件“..\SES.Common\bin\Debu ...

  6. linux之虚拟机搭建

    平台:win8.1 软件:VMware 虚拟机:centos7mini 1.下载ios镜像 http://centos.org/download/ 2.在VMware上面安装ios镜像 3.设置网卡连 ...

  7. 字符串匹配--manacher算法模板

    manacher算法主要是处理字符串中关于回文串的问题的,它可以在 O(n) 的时间处理出以字符串中每一个字符为中心的回文串半径,由于将原字符串处理成两倍长度的新串,在每两个字符之间加入一个特定的特殊 ...

  8. CSS 样式的优先级

    1. 同一元素引用了多个样式时,排在后面的样式属性的优先级高 例如,下面的 div,同时引用了 [.default] 和 [.user] 中的样式,其中 [.user] 样式中的 width 属性会替 ...

  9. 【转】iOS bitcode实战 -- without full bitcode

    原文网址:http://www.voidcn.com/blog/GrowingGiant/article/p-5012705.html 关于bitcode的介绍,直接看下边两篇: 理解Bitcode: ...

  10. python编码-2

    字典 >>> aa={} >>> aa['wo']=[1,2,3,4] >>> aa['ni']=[5,6,7,8] >>> a ...