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


Posted in Javascript onJanuary 16, 2017

如果不设置 href属性在IE6下面会不响应hover。双击后会选中标签的父容器而非这个一a标签(IE下都存在这一问题)。

代码如下 

<a href="javascirpt:fn(this)"> <a onclick="fn(this)">

假定我们有个fn方法,需要取到这个元素,第一个方法传入的this是空值。

所以,比较推荐的写法是

代码如下

<a href="javascript:void(0)" onclick="fn(this)">

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

代码如下

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

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

代码如下

<a href="http://blog.163.com/wb_zhaoyuwei/blog/#" 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="https://3water.com/zhongxing/U880/ javascript:void(0)" onclick="xxx();">xx</a>

但是这种方法在复杂环境有时会产生奇怪的问题,尽量不要用javascript:协议做为A的href属性,这样不仅会导致不必要的触发window.onbeforeunload事件,在IE里面更会使gif动画图片停止播放。

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

TabPane的JS源码,由于onclick没有返回FALSE,当IFRMAE中关闭TABPANE时会导致href执行,页面显示有问题。解决办法就是将下面代码复制到使用TAB的JSP中。

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

1 顺序

ie 6 : href 先触发 onclick 后触发

其他浏览器 先触发onlick 后触发 href

2 href="javascript: xxx()"

不能传入this作为参数

onclick可以

代码如下

<a href="javascript:alert('href event');" onclick="clickevent(this);">

3 优先触发的方法如果返回 false 导致后一个事件不被触发

比如

代码如下

<a href="javascript:alert('href event');" onclick="clickevent(this); return false;">

4

<a href="#"> 会导致页面定位到书签位置,

5

由于 1和 4 的原因

在ie6 下 同时有 <a href="#" 和 onclick的时候 由于页面先因为href重新载入了一次,导致 onclick事件被浏览器丢弃。

6 总结:

1) 在不需要传递this作为方法的参数时候,推荐

只使用href="JavaScript: "

2) 如果需要使用this参数,推荐

代码如下

<a href="javascript:void(0);" onclick="doSomthing(this)" > 

如下面一个列子。

我们需要A在第一次和第二次点击的时候 访问 href 第3次以后的就访问另一个地址

代码如下

var href=0
function clicka(obj)
{
 if (href==2)
 {
 obj.href="http://www.baidu.com?qc";
 }else
 {
 href++;
 }
 return true;
}
 <a href="https://3water.com/" target=_blank id="showa" onclick="clicka(this)"> 开屏高速下载 </a>

在a标签的href与onclick中使用javascript的区别

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

假设链接中同时存在 href 与 onclick,如果想让 href 属性下的动作不执行,onclick 必须得到一个 false 的返回值。不信,你可以将 goGoogle 函数中的 return false 注释掉;

如果页面过长有滚动条,且希望通过链接的 onclick 事件执行操作。应将它的 href 属性设为 javascript:void(0);,而不要是 #,这可以防止不必要的页面跳动;

如果在链接的 href 属性中调用一个有返回值的函数,当前页面的内容将被此函数的返回值代替;

在按住Shift键的情况下会有所区别。

今天我遇到的问题,在IE6.0里以href的形式访问不到parentNode。

尽量不要用javascript:协议做为A的href属性,这样不仅会导致不必要的触发window.onbeforeunload事件,在IE里面更会使gif动画图片停止播放。

就这些,花了不少时间在这上面。

[缘由]

用CheckBoxList控件时想实现在每个checkbox后再加链接的功能,点链接实现一些功能之外,还要把checkbox选中。

代码如下

<input type="checkbox" name="chk" id="chk">
<label for="chk">选中它<a onclick="this.parentNode.click();" href="http://luwenxiang1990.blog.163.com/blog/#" style="border:solid 1px blue;">[label中的链接]</a></label>

最后用parentNode来实现的。

以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,同时也希望多多支持三水点靠木!

Javascript 相关文章推荐
图片完美缩放
Sep 07 Javascript
Javascript的IE和Firefox兼容性汇编(zz)
Feb 02 Javascript
JQuery中的事件及动画用法实例
Jan 26 Javascript
JS显示日历和天气的方法
Mar 01 Javascript
jQuery使用$.each遍历json数组的简单实现方法
Apr 18 Javascript
全面了解函数声明与函数表达式、变量提升
Aug 09 Javascript
微信小程序 时间格式化(util.formatTime(new Date))详解
Nov 16 Javascript
详解JavaScript RegExp对象
Feb 04 Javascript
Bootstrap缩略图与警告框学习使用
Feb 08 Javascript
详解VUE的状态控制与延时加载刷新
Mar 27 Javascript
JavaScript实现图片切换效果
Aug 12 Javascript
Vue+Element实现表格编辑、删除、以及新增行的最优方法
May 28 Javascript
jQuery插件扩展操作入门示例
Jan 16 #Javascript
jQuery插件版本冲突的处理方法分析
Jan 16 #Javascript
js实现带缓动动画的导航栏效果
Jan 16 #Javascript
jQuery居中元素scrollleft计算方法示例
Jan 16 #Javascript
jQuery使用正则表达式替换dom元素标签用法示例
Jan 16 #Javascript
JavaScript日期选择功能示例
Jan 16 #Javascript
jquery——九宫格大转盘抽奖实例
Jan 16 #Javascript
You might like
php5 apache 2.2 webservice 创建与配置(java)
2011/01/27 PHP
PHP基于接口技术实现简单的多态应用完整实例
2017/04/26 PHP
Yii框架实现多数据库配置和操作的方法
2017/05/25 PHP
再谈Yii Framework框架中的事件event原理与应用
2020/04/07 PHP
jquery里的正则表达式说明
2011/08/03 Javascript
javascript的offset、client、scroll使用方法详解
2012/12/25 Javascript
将nodejs打包工具整合到鼠标右键的方法
2013/05/11 NodeJs
利用JavaScript检测CPU使用率自己写的
2014/03/22 Javascript
jQuery中parentsUntil()方法用法实例
2015/01/07 Javascript
jQuery使用empty()方法删除元素及其所有子元素的方法
2015/03/26 Javascript
javascript动态创建表格及添加数据实例详解
2015/05/13 Javascript
jquery实现Slide Out Navigation滑出式菜单效果代码
2015/09/07 Javascript
JavaScript function函数种类详解
2016/02/22 Javascript
jQuery表单事件实例代码分享
2016/08/18 Javascript
Laravel中常见的错误与解决方法小结
2016/08/30 Javascript
JavaScript常用代码书写规范的超全面总结
2016/09/11 Javascript
nodejs动态创建二维码的方法
2017/08/12 NodeJs
Vue+SpringBoot开发V部落博客管理平台
2017/12/27 Javascript
Node解决简单重复问题系列之Excel内容的获取
2018/01/02 Javascript
微信小程序动态生成二维码的实现代码
2018/07/25 Javascript
解决vue刷新页面以后丢失store的数据问题
2020/08/11 Javascript
Python 装饰器使用详解
2017/07/29 Python
Python学习_几种存取xls/xlsx文件的方法总结
2018/05/03 Python
Python 监测文件是否更新的方法
2019/06/10 Python
python删除文件夹下相同文件和无法打开的图片
2019/07/16 Python
python爬虫项目设置一个中断重连的程序的实现
2019/07/26 Python
python 进程 进程池 进程间通信实现解析
2019/08/23 Python
Python文本处理简单易懂方法解析
2019/12/19 Python
很酷的HTML5电子书翻页动画特效
2016/02/25 HTML / CSS
汇集了世界上最好的天然和有机美容产品:LoveLula
2018/02/05 全球购物
技校生自我鉴定范文
2013/09/26 职场文书
高级方案规划工程师岗位职责
2013/11/29 职场文书
婚礼证婚人证婚词
2014/01/13 职场文书
一名老师的自我评价
2014/02/07 职场文书
关于五一放假的通知
2015/08/18 职场文书
Python自动化工具之实现Excel转Markdown表格
2022/04/08 Python