关于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 ...
随机推荐
- Codeforces Round #385(div 2)
A =w= B QwQ C 题意:n个点m条边的无向图,其中有k个特殊点,你在这张图上尽可能多的连边,要求k个特殊点两两不连通,问最多能连多少边 分析:并查集 对原图做一次并查集,找出特殊点所在集合中 ...
- 聊聊 C 语言中的 sizeof 运算
聊聊 sizeof 运算 在这两次的课上,同学们已经学到了数组了.下面几节课,应该就会学习到指针.这个速度的确是很快的. 对于同学们来说,暂时应该也有些概念理解起来可能会比较的吃力. 先说一个概念叫内 ...
- python命名空间
在"python之禅"那几句话中有一句:namespace is a good thing. python对于命名空间的处理非常简单,下面的内容不一定真实,完全是我根据现象推测出来 ...
- ActiveMQ在Linux中的安装
1.下载相关activeMQ安装包 下载路径:http://activemq.apache.org/download.html 下载最新安装包,选择Linux版进行下载 2.解压重命名 (1)解压: ...
- 如何做好PMO,PMO分哪些方面?
谢邀! 理论的东西,中国PMO大会的帐号说的很全面了. 我分享一些个人感受.失败经验: 我曾帮助中国区COO创立过PMO并且运营两年,COO离职后终止. 成功案例: 我曾看过总部老大们设立Busine ...
- 如何生成每秒百万级别的 HTTP 请求?
第一篇:<如何生成每秒百万级别的 HTTP 请求?> 第二篇:<为最佳性能调优 Nginx> 第三篇:<用 LVS 搭建一个负载均衡集群> 本文是构建能够每秒处理 ...
- PHP 自动加载规范PSR-4
.note-content { font-family: "Helvetica Neue", Arial, "Hiragino Sans GB", STHeit ...
- 面对bug和困难的心态
遇到bug了? 作为程序员,会面对各种各样的bug,我们在编写代码的时候,也是生产bug的过程.在公司总会遇到老同事留下的代码,这些代码出现问题了该怎么办?最常见的想法就是, 老同事怎么考虑这么不周到 ...
- 如何解决Maven和SBT下载Jar包太慢
国内:如何解决Maven和SBT下载Jar包太慢 Maven 远程仓库 <mirror> <id>ui</id> <mirrorOf>central&l ...
- selenium 页面截图并保存
import java.io.File; import java.io.IOException; import org.apache.commons.io.FileUtils; import org. ...