文档章节

超链接标签绑定JS事件&&不加"javascript:;"导致的杯具

FansUnion
 FansUnion
发布于 2015/10/22 10:29
字数 559
阅读 3
收藏 0

很久以来,在写Html和JS时,经常会给超链接<a>标签,绑定JS事件。

  我们经常看到这样的写法,<a href="javascript:;" onclick="doAction()" >Click</a>。

  我原来一直有个疑问,干嘛非要加上“javascript:;” 。原来,我很“老实”,每次都会加上。今天,又手敲了类似的代码,本着“老子就是不加,你咬我”的得瑟心态,我没有加上“javascript:;” 。

 最终的代码如下:
 <a href="" onclick="doRemove(${column.id},'${column.name}')">删除</a>

  function doRemove(id,name){

  if(confirm("确定要删除:"+name+"?")){

  $.post(

"/column/doremove.json",{

id:id

},

function(data){

console.log(data);
                    }
}  

结果非常杯具。
后台一直可以收到请求,但是前端就是没有打印data。 难道是么有返回值么?

但是,我打开新的窗口,单独发送“doremove.json” 请求,是有返回值的。

百思不得其解。
与其它正常代码对比,采用“控制变量法” ,逐步对“哪个地方的代码有不同”,但是我发现JS代码的思路完全一致。

我在反复尝试过程中发现的现象:前端confrim对话框, 后端有请求,最后也有响应。
但是后端一直打印,“render view /column/list.html” 。
JS执行完了,怎么要渲染新页面呢?

最后,突然想到,<a href="#" >click</a> 这种超链接的"href"没有值,点击的时候,打开的页面其实是“当前页面”,比如
当前页面是“http://localhost:8080/column/list” ,打开的页面还是当前页面。

通过后台打印日志,前端不出数据,以及以前写html的经验,最终想起自己没有写“javascript:;” 很可能是导致这个结果的原因。

最后,加上之后,代码完全正常。
------------------------------------------
我在想,我们经常提交form表单的时候,如果在事件方法里返回false,表单就不会提交。
<input type="submit" onclick="onsubmit()" />

 "javascript;;"起到的作用相同。

---------------------------------------
<a href="" onclick="return doRemove(${column.id},'${column.name}')">删除</a> 
doRemove直接返回false,仍然会打开这个超链接。 

 最终结论:<a href="javascript:;" onclick="doAction()" >Click</a>,老老实实这样写吧,别得瑟。

版权声明:本文为博主原创文章,未经博主允许不得转载。

© 著作权归作者所有

共有 人打赏支持
FansUnion
粉丝 57
博文 858
码字总数 825464
作品 0
丰台
高级程序员

暂无文章

IDEA中Maven打包时如何跳过测试

方法1:直接使用IDEA提供的方式 Maven命令栏的工具栏有下图中的图标,上面就写着 Skip Tests 按下图标后,如下图,test就不可用了 直接使用package命令即可。 方法2:自己编辑maven命令 进入...

karma123
5分钟前
0
0
Device eth0 does not seem to be present,delaying initialization.

场景:在进行linux 主机克隆的时候,网卡初始化一般都会有问题,最常见的“Device eth0 does not seem to be present,delaying initialization.”,从字面意思 说eth0没有固化,延迟启动。由...

hnairdb
5分钟前
0
0
国内首个区块链试验区在海南成立

据新华社报道,10月8日,海南自贸区(港)区块链试验区正式在海南生态软件园授牌设立,这也是目前为止国内第一个区块链试验区。 该试验区位于海南生态软件园,与试验区同一天成立还有2家研究...

linuxCool
17分钟前
0
0
Java日期和时间获取问题

获取年月日时分秒 Calendar cal = Calendar.getInstance();//获取年int year = cal.get(Calendar.YEAR);//获取月,范围是0-11,最后使用需+1int month = cal.get(Cal...

lanyu96
36分钟前
10
0
Ceph学习笔记2-在Kolla-Ansible中使用Ceph后端存储

环境说明 使用Kolla-Ansible请参考《使用Kolla-Ansible在CentOS 7单节点上部署OpenStack Pike》; 部署Ceph服务请参考《Ceph学习笔记1-Mimic版本多节点部署》。 配置Ceph 以osdev用户登录: ...

LastRitter
39分钟前
9
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部