a标签的href与onclick事件的区别详解

onclick中javascript的区别一般没用到都没注意，但出错时才有些郁闷，看文本章解释如下：

以前一直很随意，后来看.net里的linkbutton似乎是用在<a href="javascript:fun();"...>的形式，今天用这种方式就遇到一些问题，摘网友的文章和我的结论放在下面：

1.链接的 onclick 事件被先执行，其次是 href 属性下的动作（页面跳转，或 javascript 伪链接）；
2.假设链接中同时存在 href 与 onclick，如果想让 href 属性下的动作不执行，onclick 必须得到一个 false 的返回值。不信，你可以将 goGoogle 函数中的 return false 注释掉；
3.如果页面过长有滚动条，且希望通过链接的 onclick 事件执行操作。应将它的 href 属性设为 javascript:void(0);，而不要是 #，这可以防止不必要的页面跳动；
4.如果在链接的 href 属性中调用一个有返回值的函数，当前页面的内容将被此函数的返回值代替；
5.在按住Shift键的情况下会有所区别。
6.今天我遇到的问题，在IE6.0里以href的形式访问不到parentNode。
7.尽量不要用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="#" style="border:solid 1px blue;">[label中的链接]</a></label>

最后用parentNode来实现的。

<a href="javascript:void(0)" onclick="defineField(this);return false">ClickToDefine</a>

赞 (0)

相关推荐

  • window.location.href = window.location.href 跳转无反应 a超链接onclick事件写法

    错误写法 , 主要是在 href="#"这里 复制代码 代码如下: 错误写法 , 主要是在 href="#"这里 脚本如下 复制代码 代码如下: if (data == "发送成功") {                    alert(data);                    window.location.href = window.location.href;                } 正确的写法  href 后面跟一个

  • A标签中通过href和onclick传递的this对象实现思路

    在blog的后台管理中允许为一个分类添加一个地址,但是不好添加onclick事件.想传递当前对象给一个函数,于是就将这个URL写成"Javascript:shoControlSidebar(this)",可是结果发现这并不可行,传递过去的参数是一个对象,但是却得不到任何其他信息.我想得到的是innerText,而这个this并非指向它所在的A标签. 这是<a href="Javascript:shoControlSidebar(this)">和<a

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

    如果不设置 href属性在IE6下面会不响应hover.双击后会选中标签的父容器而非这个一a标签(IE下都存在这一问题). 代码如下 <a href="javascirpt:fn(this)"> <a onclick="fn(this)"> 假定我们有个fn方法,需要取到这个元素,第一个方法传入的this是空值. 所以,比较推荐的写法是 代码如下 <a href="javascript:void(0)" onclic

  • a标签的href和onclick 的事件的区别介绍

    1.onclick事件先执行,如果onclick事件返回一个false值则href不再执行. 2.href="#"默认页面到锚点#top所以页面有滚动条时会跳到最上面.最好的解决办法是href="javascript:void(0);". 3.href中的返回内容会冲掉当前页面的信息.

  • a标签的href与onclick事件的区别详解

    onclick中javascript的区别一般没用到都没注意,但出错时才有些郁闷,看文本章解释如下: 以前一直很随意,后来看.net里的linkbutton似乎是用在<a href="javascript:fun();"...>的形式,今天用这种方式就遇到一些问题,摘网友的文章和我的结论放在下面: 1.链接的 onclick 事件被先执行,其次是 href 属性下的动作(页面跳转,或 javascript 伪链接): 2.假设链接中同时存在 href 与 onclick,如

  • C#中委托和事件的区别详解

    目录 委托和事件的概念 委托和事件的作用 委托和事件的区别 委托和事件代码实践 总结 委托和事件的概念 委托 C# 中的委托(Delegate)类似于 C 或 C++ 中函数的指针.委托(Delegate) 是存有对某个方法的引用的一种引用类型变量.引用可在运行时被改变.它本质上也是一个类. 它定义了方法的类型,使得可以将方法当作另一个方法的参数来进行传递,这种将方法动态地赋给参数的做法. 事件 事件由对象引发,通过我们提供的代码来处理.一个事件我们必须订阅(Subscribe)他们,订阅一个事

  • JavaScript onclick事件使用方法详解

    JavaScript onclick事件使用方法详解

    onclick是一个事件,当事件被触发时就会执行处理,onclick是一个处理鼠标点击的事件.本篇文章就给大家分享关于JavaScript中onclick事件的用法. 我们首先来看一下onclick事件的语法 以下是如何使用onclick事件编写. 使用document.getElementById()在文档中指定id元素,并使用function(){}处理单击该元素时发生的事件. document.getElementById("button").onclick = function

  • jQuery动态移除与增加onclick属性的方法详解

    本文实例讲述了jQuery动态移除与增加onclick属性的方法.分享给大家供大家参考,具体如下: 这里给大家介绍利用jquery的removeAttr与attr事件来给a标签增加与删除onclick事件的具体操作方法,有需要了解的朋友可参考. 要实现效果:点击链接先去掉onclick属性,3秒后再自动加上该标签中的onclick属性 jQuery中,针对标签属性的操作都是使用attr()方法来实现的,比如:$("a").attr("onclick")可获得a标签的

  • JavaScript中BOM,DOM和事件的用法详解

    JavaScript中BOM,DOM和事件的用法详解

    目录 BOM 概念 对象组成 Window:窗口对象 Location:地址栏对象 History:历史记录对象 DOM 概念 W3C DOM 标准被分为 3 个不同的部分 核心DOM模型 HTML DOM 事件监听机制 概念 常见的事件 事件简单学习 BOM 概念 BOM全称Browser Object Model浏览器对象模型,将浏览器的各个组成部分封装成对象. 对象组成 Window:窗口对象 Navigator:浏览器对象 Screen:显示器屏幕对象 History:历史记录对象 Lo

  • JS之if语句对接事件动作逻辑(详解)

    JS之if语句对接事件动作逻辑(详解)

    if 函数的实现步骤: function +名字() 指定id , 指定开关(display: none or block) if + else 构成逻辑 控制开关 决定在哪里安置一个灯泡, 指定一个id给某个标签 把开关用电线连着灯泡, 安装开关#+id名称{ 属性1= 赋值, 属性 2 = 赋值 , 属性3 = 赋值 } 所有的赋值都可以成为一个开关. 如果是一个手动版的, 这里已经完成了. 更改属性的赋值就可以变更id的样式 帮开关装上感应元件, 一旦有动静, 开关便自动switch 建立

  • JS中script标签defer和async属性的区别详解

    JS中script标签defer和async属性的区别详解

    向html页面中插入javascript代码的主要方法就是通过script标签.其中包括两种形式,第一种直接在script标签之间插入js代码,第二种即是通过src属性引入外部js文件.由于解释器在解析执行js代码期间会阻塞页面其余部分的渲染,对于存在大量js代码的页面来说会导致浏览器出现长时间的空白和延迟,为了避免这个问题,建议把全部的js引用放在</body>标签之前. script标签存在两个属性,defer和async,因此script标签的使用分为三种情况: 1.<script

  • JQuery在循环中绑定事件的问题详解

    有个页面上需要N个DOM,每个DOM里面的元素ID都要以数字结尾,比如说 <input type="text" name="username" id="username_1" value="" /> <input type="text" name="username" id="username_2" value="" />

  • Android实现连续点击多次事件的代码详解

    有时候我们需要实现这样的场景,类似进入开发者模式,即多次点击后执行操作. 首先我们先看一个方法: System提供的一个静态方法arraycopy(),我们可以使用它来实现数组之间的复制. public static void arraycopy(Object src,int srcPos,Object dest,int destPos,int length): src:源数组: srcPos:源数组要复制的起始位置: dest:目的数组: destPos:目的数组放置的起始位置: length

随机推荐