众所周知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事件所带来的一些影响的更多相关文章

  1. 父元素a标签的href默认行为以及子元素绑定的click事件的响应之间存在影响

    原文地址 背景 开发过程中遇到问题,简单写个demo 运行环境为Chrome 68 描述一下这个问题,当a标签内部存在嵌套时, 父元素a标签的href默认行为以及子元素绑定的click事件的响应之间存 ...

  2. jquery中动态添加的标签绑定的click事件失效的解决办法

    把.click()换成.live('click',function(){})(如果你的jquery的版本是1.10之前) 把.click()换成.on('click',function(){})(jq ...

  3. a标签包着img事件 ie下 a标签的click事件失效

    整个大的背景框有个点击事件, 如果标签结构是(详细的css样式略) a{background:green;} <a href=""> <img src=" ...

  4. a标签嵌套href默认行为与子元素click事件存在影响

    2018-08-07 Question about work 开发过程中遇到问题,简单写个demo 运行环境为Chrome 68 描述一下这个问题,当<a>标签内部存在嵌套时, 父元素&l ...

  5. 关于IOS浏览器:document,body的click事件触发规则

    今天做了个手机页面,点击某个按钮->弹出菜单,再点击菜单以外的任意位置->关闭菜单,在其他浏览器里面没有问题,但是在IOS浏览器中并不会关闭. 网上解决这个bug的帖子很多,这篇帖子主要是 ...

  6. jQuery解除超链接<a>的click事件

    jQuery的 unbind 方法并不能解除超链接(即a标签)的click事件,如果想让超链接的默认click事件不发生需要如下处理: Js代码 $('#some-link-id').click(fu ...

  7. 关于IOS下click事件委托失效的解决方案

    一.由于某些特殊情况下,需要用到事件委托,比如给动态创建的DOM绑定click事件,这里就需要事件委托(这里就牵扯到:目标元素和代理元素)目标元素:动态创建的元素,最终click事件需要绑定到该元素 ...

  8. click事件触发也有失灵的时候?

    今天做了个手机页面,点击某个按钮->弹出菜单,再点击菜单以外的任意位置->关闭菜单,在其他浏览器里面没有问题,但是在IOS浏览器中并不会关闭. 网上解决这个bug的帖子很多,这篇帖子主要是 ...

  9. vue 移动端在div上绑定click事件 失效

    在.vue的文件中使用了better-scroll,在div标签上绑定click事件后,无效. 原因:使用了better-scroll,默认它会阻止touch事件.所以在配置中需要加上click: t ...

随机推荐

  1. TypeScript 2.0候选版(RC)已出,哪些新特性值得我们关注?

    注:本文提及到的代码示例下载地址 - Runnable sample to introduce Typescript 2.0 RC new features 作为一个Javascript的超集, Ty ...

  2. 预览github上的html页面

    譬如有个项目:https://github.com/wozhizui/ife/tree/DevTogether/task19 里面有html的示例文件index.html 我们点击进去看到的是一堆代码 ...

  3. iOS面试必看

    转载:http://www.jianshu.com/p/5d2163640e26 序言 目前形势,参加到iOS队伍的人是越来越多,甚至已经到供过于求了.今年,找过工作人可能会更深刻地体会到今年的就业形 ...

  4. Linux 文件压缩与归档

    .note-content { font-family: "Helvetica Neue", Arial, "Hiragino Sans GB", STHeit ...

  5. 如何使用DOS命令(cd命令)

    如何使用DOS命令 DOS是Disk Operation System(磁盘操作系统)的简称,是个人计算机上的一类操作系统.它直接操纵管理硬盘的文件,一般都是黑底白色文字的界面.顾名思义,DOS主要是 ...

  6. js正则表达式(1)

    定义正则: var reg = new RegExp('a'); //实例化对象,参数是我们想要制定的规var reg = /a/; //简写方法 正则的常用方法: 1.test():在字符串中查找符 ...

  7. Linux学习之CentOS(二十)--CentOS6.4下修改MySQL编码方法

    但是当我们在试图对数据库中的数据进行备份或者将sql文件导入到我们的数据库时可能就会碰到编码的问题,在windows下安装mysql时我们可以在安装的时候就选择好整个数据库的编码方式(通常设置成utf ...

  8. 微软unity 注入mvc

    首先获取开源unity ,引用, 新建UnityDependencyResolver 继承IDependencyResolver,代码如下: public class UnityDependencyR ...

  9. UML大战需求与分析--阅读笔记4

    今天阅读了UML大战需求与分析第五.六章. 第五章,状态机图(State Machine Diagram),状态机图是通过描述某事物状态的改变来展现流程的.一般适用于流程围绕某个事物展开,例如请假的流 ...

  10. nginx安装与配置

    一.在线安装 ubuntu 安装 sudo apt-get install nginx 安装后文件结构为: 配置文件:/etc/nginx ,并且每台虚拟主机已经安排在 /etc/nginx/site ...