详解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 相关文章推荐
JS 分号引起的一段调试问题
Jun 18 Javascript
在多个页面使用同一个HTML片段的代码
Mar 04 Javascript
JS实现仿FLASH效果的竖排导航代码
Sep 15 Javascript
js获取浏览器高度 窗口高度 元素尺寸 偏移属性的方法
Nov 21 Javascript
JavaScript中的toString()和toLocaleString()方法的区别
Feb 15 Javascript
JS实现搜索关键词的智能提示功能
Jul 07 Javascript
vue实现图书管理demo详解
Oct 17 Javascript
详解tween.js 中文使用指南
Jan 05 Javascript
vue服务端渲染页面缓存和组件缓存的实例详解
Sep 18 Javascript
Vue结合后台导入导出Excel问题详解
Feb 19 Javascript
对Layer弹窗使用及返回数据接收的实例详解
Sep 26 Javascript
js实现数字滚动特效
Dec 16 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
完美利用Yii2微信后台开发的系列总结
2016/07/18 PHP
PHP面向对象程序设计高级特性详解(接口,继承,抽象类,析构,克隆等)
2016/12/02 PHP
解决Laravel5.2 Auth认证退出失效的问题
2019/10/14 PHP
Javascript 面向对象之重载
2010/05/04 Javascript
Javascript页面添加到收藏夹的简单方法
2013/08/07 Javascript
js获取URL的参数的方法(getQueryString)示例
2013/09/29 Javascript
javascript窗口宽高,鼠标位置,滚动高度(详细解析)
2013/11/18 Javascript
JavaScript数组的一些奇葩行为
2016/01/25 Javascript
JS根据浏览器窗口大小实时动态改变网页文字大小的方法
2016/02/25 Javascript
Bootstrap3.0建站教程(一)之bootstrap表单元素排版
2016/06/01 Javascript
Highcharts学习之数据列
2016/08/03 Javascript
Vue.js每天必学之组件与组件间的通信
2016/09/08 Javascript
jQuery+HTML5实现WebGL高性能烟花绽放动画效果【附demo源码下载】
2017/08/18 jQuery
jQuery实现可兼容IE6的滚动监听功能
2017/09/20 jQuery
bootstrap fileinput插件实现预览上传照片功能
2018/01/23 Javascript
解决Vue不能检测数组或对象变动的问题
2018/02/24 Javascript
vue获取当前点击的元素并传值的实例
2018/03/09 Javascript
Jquery的Ajax技术使用方法
2019/01/21 jQuery
[01:16]2014DOTA2 TI专访C9战队EE:中国五强中会占三席
2014/07/10 DOTA
python3实现跳一跳点击跳跃
2018/01/08 Python
python skimage 连通性区域检测方法
2018/06/21 Python
Django密码系统实现过程详解
2019/07/19 Python
Python Gitlab Api 使用方法
2019/08/28 Python
Django后台管理系统的图文使用教学
2020/01/20 Python
python 下载文件的多种方法汇总
2020/11/17 Python
2019年c语言经典面试题目
2016/08/17 面试题
韩国商务邀请函
2014/01/14 职场文书
高级工程师英文求职信
2014/03/19 职场文书
诚信考试标语
2014/06/24 职场文书
2015年学校财务工作总结
2015/05/19 职场文书
电影红河谷观后感
2015/06/11 职场文书
2015年四年级班主任工作总结
2015/10/22 职场文书
电工生产实习心得体会
2016/01/22 职场文书
导游词之太湖
2019/10/08 职场文书
java设计模式--建造者模式详解
2021/07/21 Java/Android
一次SQL查询优化原理分析(900W+数据从17s到300ms)
2022/06/10 SQL Server