实现a标签中的各种点击(onclick)事件的方法

时间:2022-08-29 19:44:03

我们常用的在a标签中有点击事件:
1. a href="javascript:js_method();"

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

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

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

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

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

4.a href="#" onclick="js_method()"

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

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

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

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

综合上述,在a中调用js函数最适当的方法推荐使用:
a href="javascript:void(0);" onclick="js_method()"
a href="javascript:;" onclick="js_method()"
a href="#" onclick="js_method();return false;"

实现a标签中的各种点击(onclick)事件的方法的更多相关文章

  1. JavaScript中,有三种常用的绑定事件的方法

    要想让 JavaScript 对用户的操作作出响应,首先要对 DOM 元素绑定事件处理函数.所谓事件处理函数,就是处理用户操作的函数,不同的操作对应不同的名称. 在JavaScript中,有三种常用的 ...

  2. ListView中的组件Button的OnClick事件触发时机

    Android开发时,ListView中的组件Button的OnClick事件必须在ListView之外的组件事件触发后才能触发? 此处ListView无OnItemClick事件,而且ListVie ...

  3. C#中combobox 控件属性、事件、方法

    一 .combobox 属性.事件.方法公共属性 名称 说明 AccessibilityObject 获取分配给该控件的 AccessibleObject. AccessibleDefaultActi ...

  4. 手机上怎么去掉a 标签中的img点击时的阴影?

    添加: <style type="text/css"> a { -webkit-tap-highlight-color: transparent; -webkit-to ...

  5. 微信小程序&lt&semi;swiper-item&gt&semi;标签中传入多个数组型数据的方法(小程序交流群:604788754)

    在<swiper-item>中用for循环传入多个成对不同数据时的实现方法. 效果如下: 遍历实现方法:wxss省略: wxml中代码: <!--导航部分轮播图--> < ...

  6. JavaScript例子1-给网页中所有&lt&semi;p&gt&semi;元素添加onclick事件

    <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title&g ...

  7. jquery中获取当前点击对象

    jquery中获取当前点击对象的简单方法就是,在点击事件click中传入event对象 click(function(event)); 调用当前对象就是$(event.target);

  8. select中option的onclick事件失效

    html: <select id="pageSelect"> <option value="1" selected onclick=&quot ...

  9. WEB前端问题——img标签的onclick事件无法响应问题【转载】

    一个纠结了一下午的问题,img标签里面的onclick事件无法响应.最终找到了错误原因,是因为img标签的id与onclick事件的方法名相同. 于是接着又测试了一下,发现name名和方法名相同也会导 ...

随机推荐

  1. applicationContext&period;xml和dispatcher-servlet&period;xml的区别

    在SpringMVC项目中我们一般会引入applicationContext.xml和dispatcher-servlet.xml两个配置文件,这两个配置文件具体的区别是什么呢? Spring 官方文 ...

  2. GPRM&sol;GNRMC定位信息的读取与解析

    帧头 UTC时间 状态 纬度 北纬/南纬 经度 东经/西经 速度 $GPRMC hhmmss.sss A/V ddmm.mmmm N/S dddmm.mmmm E/W 节 方位角 UTC日期 磁偏角 ...

  3. codeforces 711E E&period; ZS and The Birthday Paradox&lpar;数学&plus;概率&rpar;

    题目链接: E. ZS and The Birthday Paradox. time limit per test 2 seconds memory limit per test 256 megaby ...

  4. 保留键的情况下取字典中最大的值&lpar;max&bsol;zip函数的联合使用&rpar;

    在我们平常想要获取字典中value最大或者最小的值的时候,常常使用如下函数: testDict = {"age1":18,"age2":20,"age ...

  5. J2EE进阶&lpar;一&rpar;随堂笔记

    进公司搞研发,基本上用的都是J2EE框架.若想在公司混个不错的地位,首先技术上必须过关.由于需求所致,自己学习了J2EE一段时间,主要是Struts2,MyBatis(Hibernate的前身),远远 ...

  6. 转载:java中Thread&period;sleep&lpar;&rpar;函数使用

    点我跳过黑哥的卑鄙广告行为,进入正文. Java多线程系列更新中~ 正式篇: Java多线程(一) 什么是线程 Java多线程(二)关于多线程的CPU密集型和IO密集型这件事 Java多线程(三)如何 ...

  7. Mysql占用CPU过高如何优化,如何解决

    2017-02-28 15:13 331人阅读 评论(0) 收藏 举报   MySQL占用CPU过高如何优化 一次生产DB服务器的 超负荷运行问题解决: 1.查看生产DB服务器top列表, 执行 to ...

  8. Codeforces Round &num;539&amp&semi;&num;542&amp&semi;&num;543&amp&semi;&num;545 &lpar;Div&period; 1&rpar; 简要题解

    Codeforces Round #539 (Div. 1) A. Sasha and a Bit of Relax description 给一个序列\(a_i\),求有多少长度为偶数的区间\([l ...

  9. 让别人能登陆你的mysql

    线上的数据库肯定是不能轻易在开发新功能的时候动的,如果你的数据库跟线上不一样了又没有新数据库的备份,就很麻烦. 当然去动线上数据库,出了什么问题我是不想背锅的. 最稳健的办法!让管理线上数据库的同学, ...

  10. New Concept English three(19)

    27w/m 76words Kidnappers are rarely interested in Animals, but they recently took considerable inter ...