超链接标签绑定JS事件&&不加"javascript:;"导致的杯具
很久以来,在写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>,老老实实这样写吧,别得瑟。
超链接标签绑定JS事件&&不加"javascript:;"导致的杯具的更多相关文章
- 如何给a标签绑定ajax事件
<a href="review?action=delete&id=${review.id}&articleId=${review.articleId}"cla ...
- HTML中关于动态创建的标签无法绑定js事件的解决方法:.on()方法的 [.selector]
在前端页面的时候,会经常遇到用JavaScript动态创建出来的Button按钮或其他标签无法使用点击事件的问题.如下代码,使用jquery在body中动态创建一个class为demo的Button按 ...
- A标签添加JS事件,不跳转不刷新办法
<a href="javascript:;" id="submit-btn" class="submit-btn" title=&qu ...
- ElementUI el-input标签 绑定keyup事件v-on:keyup.enter="convert"无效解决方案
期望实现,输入数字后,回车直接执行点击按钮"转换" 无效写法: <el-input v-model="input" placeholder="请 ...
- 如何为属性是disabled的表单绑定js事件
$(document).click(function(e){ var el = e.target; if (el.tagName == 'INPUT') { $(el).removeAttr('dis ...
- input标签的accept属性、JQuery绑定keyDown事件
一. input标签的accept属性 当我们上传文件或者注册上传头像时,我们可以一般都是使用: <input type="file" id="my_file&qu ...
- 理解js事件冒泡事件委托事件捕获
js事件冒泡 javascript的事件传播过程中,当事件在一个元素上出发之后,事件会逐级传播给先辈元素,直到document为止,有的浏览器可能到window为止,这就是事件冒泡现象. <di ...
- jQuery--事件, 事件绑定, 阻止事件冒泡, 事件委托,页面载入后函数
1.常用事件, 按住shift键实现同步选择效果,搜索框联想效果 2.阻止事件冒泡 3.事件委托 4.使用 $(document).ready(function (){...}) 实现文件加载完绑定事 ...
- 什么是js事件,冒泡机制,事件捕获,默认行为
js事件: javascript使我们能够有能力创建动态页面,事件就是可以被js侦测到的行为,网页中每个元素都可以产生某些触发js函数的事件. 例如我们可以在用户点击某个按钮时产生一个click事件来 ...
随机推荐
- Unity的Mesh压缩:为什么我的内存没有变化?
0x00 前言 最近和朋友聊天,谈到了Mesh的内存优化问题,他发现开启Model Importer面板上的Mesh Compression选项之后,内存并没有什么变化.事实上,期望开启Mesh Co ...
- Docker Demo on Docker
install docker-machine $ curl -L https://github.com/docker/machine/releases/download/v0.10.0/docker- ...
- 开发人员的必备工具Git(初级)
Git是什么 Git是目前世界上最先进的分布式版本控制系统. 这个软件用起来就应该像这个样子,能记录每次文件的改动: 举个栗子 : 版本 用户 说明 日期 1 张三 删除了软件服务条款5 ...
- springcloud~服务注册与发现Eureka的使用
服务注册与发现是微服务里的概念,也是一个基本的组件,负责服务组件的认证,即实现『你是谁』的功能,在服务注册与发现里,存在两种模式,即服务端发现和客户端发现,咱们今天说的eureka属于客户端发现! 下 ...
- 前端笔记之移动端&响应式(中)视口&百分比布局&弹性盒模型&rem&fillpage
一.viewport视口 1.1什么是屏幕尺寸.屏幕分辨率.屏幕像素密度? 屏幕尺寸:指屏幕的对角线的长度,单位是英寸,常见的屏幕尺寸有3.5.3.7.4.2.4.7.5.0.5.5.6.0等. 屏幕 ...
- SmartCode 使用常见问题
SmartCode 常见问题 SmartCode 能干什么? SmartCode = IDataSource -> IBuildTask -> IOutput => Build Ev ...
- 痞子衡嵌入式:高性能MCU之Media应用开发那些事 - 索引
大家好,我是痞子衡,是正经搞技术的痞子.本系列痞子衡给大家介绍的是高性能MCU之Media应用开发相关知识. 飞思卡尔半导体(现恩智浦半导体)2017年推出的i.MX RT系列第一款芯片i.MXRT1 ...
- 要搞刷机!从它的尸体上踏过去!钢板云路由!WPR003N复活!成功启动OPENWRT
这是一个很鼓舞人心的标题,自从上一篇Aria2序之导言 00,成功的贴出两张开场图片,本来计划写它的开场引言 01,正好cp一个合格的导引(引导读起来有些奇怪),连续懒惰了好几天,突然想起了WPR00 ...
- Django-restframework 之权限源码分析
Django-restframework 之权限源码分析 一 前言 上篇博客分析了 restframework 框架的认证组件的执行了流程并自定义了认证类.这篇博客分析 restframework 的 ...
- webpack-插件机制杂记
系列文章 Webpack系列-第一篇基础杂记 webpack系列-插件机制杂记 前言 webpack本身并不难,他所完成的各种复杂炫酷的功能都依赖于他的插件机制.或许我们在日常的开发需求中并不需要自己 ...