实现a标签中的各种点击(onclick)事件的方法
我们常用的在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)事件的方法的更多相关文章
- JavaScript中,有三种常用的绑定事件的方法
要想让 JavaScript 对用户的操作作出响应,首先要对 DOM 元素绑定事件处理函数.所谓事件处理函数,就是处理用户操作的函数,不同的操作对应不同的名称. 在JavaScript中,有三种常用的 ...
- ListView中的组件Button的OnClick事件触发时机
Android开发时,ListView中的组件Button的OnClick事件必须在ListView之外的组件事件触发后才能触发? 此处ListView无OnItemClick事件,而且ListVie ...
- C#中combobox 控件属性、事件、方法
一 .combobox 属性.事件.方法公共属性 名称 说明 AccessibilityObject 获取分配给该控件的 AccessibleObject. AccessibleDefaultActi ...
- 手机上怎么去掉a 标签中的img点击时的阴影?
添加: <style type="text/css"> a { -webkit-tap-highlight-color: transparent; -webkit-to ...
- 微信小程序<swiper-item>标签中传入多个数组型数据的方法(小程序交流群:604788754)
在<swiper-item>中用for循环传入多个成对不同数据时的实现方法. 效果如下: 遍历实现方法:wxss省略: wxml中代码: <!--导航部分轮播图--> < ...
- JavaScript例子1-给网页中所有<p>元素添加onclick事件
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title&g ...
- jquery中获取当前点击对象
jquery中获取当前点击对象的简单方法就是,在点击事件click中传入event对象 click(function(event)); 调用当前对象就是$(event.target);
- select中option的onclick事件失效
html: <select id="pageSelect"> <option value="1" selected onclick=" ...
- WEB前端问题——img标签的onclick事件无法响应问题【转载】
一个纠结了一下午的问题,img标签里面的onclick事件无法响应.最终找到了错误原因,是因为img标签的id与onclick事件的方法名相同. 于是接着又测试了一下,发现name名和方法名相同也会导 ...
随机推荐
- 修改NLS_DATE_FORMAT的四种方式
一. 在用户环境变量中指定(LINUX) 在用户的.bash_profile中增加两句: export NLS_LANG=AMERICAN ---这一句必须指定,否则下一句不生效.export NLS ...
- Deep learning:四十(龙星计划2013深度学习课程小总结)
头脑一热,坐几十个小时的硬座北上去天津大学去听了门4天的深度学习课程,课程预先的计划内容见:http://cs.tju.edu.cn/web/courseIntro.html.上课老师为微软研究院的大 ...
- 轻松自动化---selenium-webdriver(python) (二)
本节知识点: 打印URL 将浏览器最大化 设置浏览器固定宽.高 操控浏览器前进.后退 打印URL 上一节讲到,可以将浏览器的title打印出来,这里再讲个简单的,把当前URL打印出来.其实也没啥大用, ...
- SQLServer学习笔记系列8
一.写在前面的话 最近一直在思考一个问题,什么才能让我们不显得浮躁,真正的静下心来,用心去感受,用心去回答每个人的问题,用心去帮助别人.现实的生活,往往让我们显得精疲力尽,然后我们仔细想过没用,其实支 ...
- js获取图片的真实大小,字节大小
在我们上传文件的时候,很多时候都要对他做限制,那么怎么在文件上传的时候,就获得这个文件的大小呢?至少在js前台有一个判断的时候,就不会给后台造成更大的压力了,下面就用js来获得文件的大小 <ht ...
- XML基础学习01
XML学习 1:XML:可扩展的标识语言,是一种描述结构数据的格式,简化了网络中数据交换和表示,使得代码,数据和表示分离,并作为数据交换的标准格式,被称为智能数据文档. 2:当我们不使用数据库来存储数 ...
- 对于 ThreadLocal 的理解和应用
首先,ThreadLocal 不是用来解决共享对象的多线程访问问题的,一般情况下,通过ThreadLocal.set() 到线程中的对象是该线程自己使用的对象,其他线程是不需要访问的,也访问不到的.各 ...
- android 开发:shape和selector和layer-list的(详细说明)
目录(?)[+] Shape 简介 使用的方法 属性 Selector 简介 使用的方法 layer-list 简介 例子 最后 <shape>和<selector>在An ...
- Learn Spring Framework(continue update...)
Part I. Overview of Spring Framework The Spring Framework is a lightweight(轻量级的) solution and a pote ...
- 我整理的PHP 7.0主要新特性
原文:http://php.net/manual/en/migration70.new-features.php 1.标量参数类型声明 现在支持字符串(string).整型(int).浮点数(floa ...