超链接标签绑定JS事件&&不加"javascript:;"导致的杯具
2015-05-03 00:00
399 查看
很久以来,在写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>,老老实实这样写吧,别得瑟。
我们经常看到这样的写法,<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>,老老实实这样写吧,别得瑟。
相关文章推荐
- 超链接标签绑定JS事件&&不加"javascript:;"导致的杯具
- 超链接标签绑定JS事件&&不加"javascript:;"导致的杯具
- 超链接标签绑定JS事件&&不加"javascript:;"导致的杯具
- 超链接标签绑定JS事件&&不加"javascript:;"导致的杯具
- js 给所有加载本JS页面地指定标签进行绑定事件
- 我的JavaScript回顾之路_05—0210—js和jq绑定事件的区别/事件冒泡
- a链接href="javascript:void(0);"或"javascript:;"在IE6下导致js跳转失败
- javascript 闭包 导致 的 重复 绑定 事件
- js中a标签里href="javascript:void(0)"的用途
- jquery同一标签绑定多个事件的几种方式 && js实时监听input中值变化
- 我的JavaScript回顾之路_04—0209—jsDom绑定点击事件/ js计算器/bootstrap框架
- 类似评论、点评的JS标签选择功能(及jq动态绑定事件)
- JQuery 绑定select标签的onchange事件,弹出选择的值,并实现跳转、传参(selected的值和页面其它元素的值)以及js的select
- 将事件绑定在html标签中和js动态绑定的区别
- javascript学习(十二):js 中为某个对象(控件)绑定事件通常可以采取两种手段
- js中事件重复绑定会相应导致多次处理程序的响应
- javascript(六)js事件绑定浏览器兼容解决方案 attachEvent addEventListener
- HTML中关于动态创建的标签无法绑定js事件的解决方法
- javascript 处理a标签超链接的默认事件