关于a标签自身的click事件所带来的一些影响
众所周知a标签自身带有点击事件<a href="#"></a>从它本身的特性来讲并没有什么不好的影响,但是如果你在a标签里又加入onclick事件则<a href="#" onclick=""></a>会产生意想不到的后果
如,
本人在一个项目中由于没将a标签自身的点击事件阻断而造成跨域问题也就是在控制台的Network里面的Status的状态为canceled

这是我第一次遇到这种状态,于是上网上查了一下,确定是跨域问题,所以就在网上查找所有解决跨域的方法,但都无济于事,后来想到以前在书上看到a标签阻止自身默认的点击事件,return false;于是就抱着试一试的心态,看了看我项目上的代码,然后将a标签自身的click事件去掉,只剩下自己写的onclick 事件,结果就是a标签的原因导致的。
a标签造成出现跨域的情况需要根据不同的问题和具体的项目来分析。
2、点击取消后 整个JTABLE表往上移了


造成的原因:
a href="#" onclick="js_method()"
这种方法也是网上很常见的代码,#是标签内置的一个方法,代表top的作用。所以用这种方法点击后网页后返回到页面的最顶端。
a标签
我们常用的在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标签自身的click事件所带来的一些影响的更多相关文章
- 父元素a标签的href默认行为以及子元素绑定的click事件的响应之间存在影响
原文地址 背景 开发过程中遇到问题,简单写个demo 运行环境为Chrome 68 描述一下这个问题,当a标签内部存在嵌套时, 父元素a标签的href默认行为以及子元素绑定的click事件的响应之间存 ...
- jquery中动态添加的标签绑定的click事件失效的解决办法
把.click()换成.live('click',function(){})(如果你的jquery的版本是1.10之前) 把.click()换成.on('click',function(){})(jq ...
- a标签包着img事件 ie下 a标签的click事件失效
整个大的背景框有个点击事件, 如果标签结构是(详细的css样式略) a{background:green;} <a href=""> <img src=" ...
- a标签嵌套href默认行为与子元素click事件存在影响
2018-08-07 Question about work 开发过程中遇到问题,简单写个demo 运行环境为Chrome 68 描述一下这个问题,当<a>标签内部存在嵌套时, 父元素&l ...
- 关于IOS浏览器:document,body的click事件触发规则
今天做了个手机页面,点击某个按钮->弹出菜单,再点击菜单以外的任意位置->关闭菜单,在其他浏览器里面没有问题,但是在IOS浏览器中并不会关闭. 网上解决这个bug的帖子很多,这篇帖子主要是 ...
- jQuery解除超链接<a>的click事件
jQuery的 unbind 方法并不能解除超链接(即a标签)的click事件,如果想让超链接的默认click事件不发生需要如下处理: Js代码 $('#some-link-id').click(fu ...
- 关于IOS下click事件委托失效的解决方案
一.由于某些特殊情况下,需要用到事件委托,比如给动态创建的DOM绑定click事件,这里就需要事件委托(这里就牵扯到:目标元素和代理元素)目标元素:动态创建的元素,最终click事件需要绑定到该元素 ...
- click事件触发也有失灵的时候?
今天做了个手机页面,点击某个按钮->弹出菜单,再点击菜单以外的任意位置->关闭菜单,在其他浏览器里面没有问题,但是在IOS浏览器中并不会关闭. 网上解决这个bug的帖子很多,这篇帖子主要是 ...
- vue 移动端在div上绑定click事件 失效
在.vue的文件中使用了better-scroll,在div标签上绑定click事件后,无效. 原因:使用了better-scroll,默认它会阻止touch事件.所以在配置中需要加上click: t ...
随机推荐
- JAVA的正则表达式-学习
1.正则表达式作用 正则表达式,是用来匹配字符串的,即检查一定的格式,还能按格式进行分组,替换......其实,不用正则表达式,也可以编.但是,大多数情况下,正则表达式可以提高你编程的效率. 2.学习 ...
- vim修改文字编码
在Vim中查看文件编码 :set fileencoding 即可显示文件编码格式.如果你只是想查看其它编码格式的文件或者想解决 用Vim查看文件乱码的问题,那么在~/.vimrc 文件中添加以下内容: ...
- CSS你可能还不知道的一些知识点
一.特殊选择器 1.* 用于匹配任何的标记 2.> 用于指定父子节点关系 3.E + F 毗邻元素选择器,匹配所有紧随E元素之后的同级元素F 4.E ~ F 匹配所有E元素之后的同级元素F 5. ...
- Scala中apply的用法
Scala中的 apply 方法有着不同的含义, 对于函数来说该方法意味着调用function本身, 以下说明摘自Programming in Scala, 3rd Edition Every fun ...
- C# 获取当前域的路径值
做域认证的情况下, 要先获取域的path, 可以先用代码获取当前域的path. string pathCur = "LDAP://RootDSE"; DirectoryEntry ...
- css使absolute相对于父容器进行定位而不是以body(为什么绝对定位(absolute)的父级元素必须是相对定位(relative))
借知乎的回答如下解释: 首先,我想告诉你的是,如果父级元素是绝对定位(absolute)或者没有设置,里面的绝对定位(absolute)自动以body定位.这句话是错的.正确的是:只要父级元素设了po ...
- Theano Inplace
Theano Inplace inplace Computation computation that destroy their inputs as a side-effect. Example i ...
- udisk2阻止自动Mount某些设备
1.在/etc/udev/rules.d/目录下添加一个诸如99.udisk2.rules 2.其中的内容诸如: # This file contains udev rules for udisks ...
- 线程池 Threadpool (还需要补充)
1.池(pool)是一种常见的提高性能的方式.有时创建和销毁一些资源是非常耗费时间的行为.我们会考虑在一个池内放一些资源,在用的时候拿,不够的时候添加,用完就归还,这样就可以避免不断的创建和销毁资源了 ...
- Jmeter教程 简单的压力测试
Jmeter教程 简单的压力测试:http://www.cnblogs.com/TankXiao/p/4059378.html