a标签里面嵌套一个a标签,点击子链接标签时,同时触发了父标签a
2016-06-30 09:48
260 查看
情景还原:
html生成的源码:
<a href="main.aspx?type=navTwo&stuNo=19&navName=电子资源" style="font-size: 16px;">电子资源
span点击触发事件:
function redict(id, name) {
//接下来使用js代码进行页面跳转
window.location.href = "main.aspx?type=nav&stuNo=" + id + "&navName=" + name;
}
当点击span内的标签时会触发a标签的href 导致跳转链接不正确
解决办法:
js添加event.preventDefault();
阻止默认事件.比如当你点击带有href值的a标签时,元素响应click事件后,还会发生页面跳转.如果加上这个方法(属性)后,浏览器只会响应click事件,不会发生跳转.
更改js:
function redict(id, name) {
event.preventDefault();
//接下来使用js代码进行页面跳转
window.location.href = "main.aspx?type=nav&stuNo=" + id + "&navName=" + name;
}
html生成的源码:
<a href="main.aspx?type=navTwo&stuNo=19&navName=电子资源" style="font-size: 16px;">电子资源
<b style="background: url(http://localhost:58596/images/LS/right.png);"></b> <div class="c1-child" style="display: block; left: 124px; color: rgb(0, 0, 0);"> <span onclick="redict('41','电子资源')" style="color: rgb(0, 0, 0); background: rgb(255, 255, 255);">数据库</span> <span onclick="redict('40','电子资源')" style="color: rgb(0, 0, 0); background: rgb(255, 255, 255);">试用数据库</span> <span onclick="redict('39','电子资源')">自建特色数据库</span> </div>
</a>
span点击触发事件:
function redict(id, name) {
//接下来使用js代码进行页面跳转
window.location.href = "main.aspx?type=nav&stuNo=" + id + "&navName=" + name;
}
当点击span内的标签时会触发a标签的href 导致跳转链接不正确
解决办法:
js添加event.preventDefault();
阻止默认事件.比如当你点击带有href值的a标签时,元素响应click事件后,还会发生页面跳转.如果加上这个方法(属性)后,浏览器只会响应click事件,不会发生跳转.
更改js:
function redict(id, name) {
event.preventDefault();
//接下来使用js代码进行页面跳转
window.location.href = "main.aspx?type=nav&stuNo=" + id + "&navName=" + name;
}
相关文章推荐
- Hello Mr.J——用CXF框架发布WebService
- Java.String.endsWith()
- 很不错的hadoop学习网站:http://www.weixuehao.com/archives/111
- 从eclipse导出 eclipse java formatter config file(eclipse code formatter插件配置文件)&&全屏有条线??
- latex基本语法
- 里诺图书管理系统 v2.34官方版
- 高效整洁CSS代码规范
- 6.30题目小结
- js实现动画,右移、左移,上移,下移,左上角移动等
- Unity应用的iOS热更新
- Git使用方法及操作命令
- Tomcat7下配置SSI(解决中文乱码问题)
- red hat 6.5 Linux.6.5 安装yum
- 【matlab】怎么记录和保存运行结果-diary 命令
- MySQL内建函数
- Scrapy爬妹子图网站图片
- WEBRTC 支持H264编解码
- 全面了解MySql中的事务
- MSComm32控制的使用
- Android数据存储五种方式总结