关于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 ...
随机推荐
- [LeetCode] Flatten Nested List Iterator 压平嵌套链表迭代器
Given a nested list of integers, implement an iterator to flatten it. Each element is either an inte ...
- [LeetCode] Paint House II 粉刷房子之二
There are a row of n houses, each house can be painted with one of the k colors. The cost of paintin ...
- HttpURLConnection类
导语 java.net.HttpURLConnectin类是URLConnection类的抽象子类.它在处理协议为HTTP的URL时特别有效.具体而言,它通过它可以获取和设置请求方法,确定是否重定向, ...
- vue.js 第五课
计算属性 1.基础例子 2.计算属性 vs $watch 3.计算 setter 4.计算属性开发实务demo 1.计算属性 computed( 电脑computer) (区别普通属性) 计算属性 ...
- 大于16MB的QSPI存放程序引起的ZYNQ重启风险
ZYNQ芯片是近两年比较流行的片子,双ARM+FPGA,在使用分立FPGA和CPU的场合很容易替代原来的分立器件. ZYNQ可以外接QSPI FLASH作为程序的存储介质. QSPI和SPI flas ...
- jQuery种种
jquery UI autocomplete获得焦点自动弹出跟随下拉框--http://blog.csdn.net/jiusong_mi/article/details/49249853 $(&quo ...
- ios学习资源
1.BigShow学习Demo集合 https://github.com/BigShow1949/BigShow1949 2.[干货]一行代码实现自定义转场动画http://www.cocoachin ...
- Leetcode 60. Permutation Sequence
The set [1,2,3,-,n] contains a total of n! unique permutations. By listing and labeling all of the p ...
- 【BZOJ-4197】寿司晚宴 状压DP
4197: [Noi2015]寿司晚宴 Time Limit: 10 Sec Memory Limit: 512 MBSubmit: 694 Solved: 440[Submit][Status] ...
- UVA725
虽然是暴力求解,但是也要观察条件,尽量提高效率.如本题,原本要枚举10个数,但是分析可知通过枚举fghij就可以了. #include<stdio.h> #include<strin ...