很久以来,在写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:;"导致的杯具的更多相关文章

  1. 如何给a标签绑定ajax事件

    <a href="review?action=delete&id=${review.id}&articleId=${review.articleId}"cla ...

  2. HTML中关于动态创建的标签无法绑定js事件的解决方法:.on()方法的 [.selector]

    在前端页面的时候,会经常遇到用JavaScript动态创建出来的Button按钮或其他标签无法使用点击事件的问题.如下代码,使用jquery在body中动态创建一个class为demo的Button按 ...

  3. A标签添加JS事件,不跳转不刷新办法

    <a href="javascript:;" id="submit-btn" class="submit-btn" title=&qu ...

  4. ElementUI el-input标签 绑定keyup事件v-on:keyup.enter="convert"无效解决方案

    期望实现,输入数字后,回车直接执行点击按钮"转换" 无效写法: <el-input v-model="input" placeholder="请 ...

  5. 如何为属性是disabled的表单绑定js事件

    $(document).click(function(e){ var el = e.target; if (el.tagName == 'INPUT') { $(el).removeAttr('dis ...

  6. input标签的accept属性、JQuery绑定keyDown事件

    一. input标签的accept属性 当我们上传文件或者注册上传头像时,我们可以一般都是使用: <input type="file" id="my_file&qu ...

  7. 理解js事件冒泡事件委托事件捕获

    js事件冒泡 javascript的事件传播过程中,当事件在一个元素上出发之后,事件会逐级传播给先辈元素,直到document为止,有的浏览器可能到window为止,这就是事件冒泡现象. <di ...

  8. jQuery--事件, 事件绑定, 阻止事件冒泡, 事件委托,页面载入后函数

    1.常用事件, 按住shift键实现同步选择效果,搜索框联想效果 2.阻止事件冒泡 3.事件委托 4.使用 $(document).ready(function (){...}) 实现文件加载完绑定事 ...

  9. 什么是js事件,冒泡机制,事件捕获,默认行为

    js事件: javascript使我们能够有能力创建动态页面,事件就是可以被js侦测到的行为,网页中每个元素都可以产生某些触发js函数的事件. 例如我们可以在用户点击某个按钮时产生一个click事件来 ...

随机推荐

  1. Visual Studio高效实用的扩展工具、插件

    说明: 对一个有想法的程序员来说,善于使用一款高效的开发工具是很重要的,今天给大家介绍的是宇宙第一IDE vs用起来很不错的开发工具,假如大家觉得不错也可以尝试的用用,毕竟对于我们这些一天一大半的时间 ...

  2. ASP.NET MVC默认配置如有跳转到指定的Area区域中的对应程序中

    今天在搭建一个基于MVC的项目,因为项目涉及到了手机和pc端,为了方便和减少二者之间的耦合我在区域(Areas)中建立了两个 程序空间,那么问题来了我想让程序默认跳转到我所指定的areas中的对应项目 ...

  3. DotNetCore跨平台~组件化时代来了

    回到目录 进行dotnetcore之后,各种对象都是基于DI进行生产的,这就有了对象的生命周期一说,早在autofac里也有相关知识点,这与Microsoft.Extensions.Dependenc ...

  4. 研究windows下SVN备份及还原恢复方案

    windows下SVN备份方案 备份策略 svn备份一般采用三种方式: 1)svnadmin dump  2)svnadmin hotcopy  3)svnsync.  注意,svn备份不宜采用普通的 ...

  5. SpringCloud微服务如何优雅停机及源码分析

    目录 方式一:kill -9 java进程id[不建议] 方式二:kill -15 java进程id 或 直接使用/shutdown 端点[不建议] kill 与/shutdown 的含义 Sprin ...

  6. 【我们一起写框架】MVVM的WPF框架(一)—序篇

    前言 我想,有一部分程序员应该是在二三线城市的,虽然不知道占比,但想来应该不在少数. 我是这部分人群中的一份子. 我们这群人,面对的客户,大多是国内中小企业,或者政府的小部门.这类客户的特点是,资金有 ...

  7. webpack-插件机制杂记

    系列文章 Webpack系列-第一篇基础杂记 webpack系列-插件机制杂记 前言 webpack本身并不难,他所完成的各种复杂炫酷的功能都依赖于他的插件机制.或许我们在日常的开发需求中并不需要自己 ...

  8. 每周分享五个 PyCharm 使用技巧(一)

    PyCharm 是大多数 Python 开发者的首选 IDE,每天我们都在上面敲着熟悉的代码,写出一个又一个奇妙的功能. 一个每天都在使用的工具,如果能掌握一些高效的使用技巧,肯定会给我们的开发效率带 ...

  9. 配置CLion作为Qt5开发环境

    使用Qt进行程序开发时QtCreator总是不二之选.作为老牌IDE在提供了强大的功能同时也对Qt的支持做了许多优化.如果没有特别的原因你应该使用它. 然而一个顺手的工具将会极大得提升生产效率,而如果 ...

  10. 限制TextBox只允许输入数字和字母

    设置TextBox控件属性 ImeMode=Disable ShortcutsEnabled=False VB.NET Private Sub TextBox1_KeyDown(sender As O ...