<tr><a href="xxx">连接</a></tr>

如上结构,单击tr的时候跳转至另一页面

<tr style="cursor:pointer" onmouseover="this.style.backgroundColor='gainsboro'" onmouseout="this.style.backgroundColor=''" onclick="return Click();">
function Click() {
    window.location.href = "xxx";
}

<a href="xxx">连接</a> 可更改为<a href="xxx" onclick="event.cancelBubble=true">连接</a>

这样可以避免单击a标签的同时也跳转至另一页面。onclick="event.cancelBubble=true" 取消事件处理。

否则单击a的同时会跳转另一页面。

解析:

取消事件冒泡,在 IE 的事件机制中,触发事件会从子元素向父元素逐级上传,就是说,如果子元素触发了单击事件,那么也会触发父元素的单击事件;event.cancelBubble=true;可以停止事件继续上传

补充一点,Ie的事件传递是从下到上的:

事件来源对象->上级对象->上上级对象->.....->body->document->window

NS的事件传递是从上到下:

window->document->body->....->事件来源对象

(event.returnValue=false 设置事件的返回值为false,即取消事件处理)

来自:http://www.cnblogs.com/wjmo520/archive/2013/01/15/2860814.html

event.cancelBubble=true的更多相关文章

  1. JS——取消事件冒泡,实现div的显示与隐藏 event.cancelBubble = true;

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  2. 【转载】设置event.cancelBubble,使触发子元素的onclick不同时触发父元素的onclick

    由于HTML中的对象都是层次结构,比如一个Table包含了多个TR,一个TR包含了多个TD Bubble就是一个事件可以从子节点向父节点传递,比如鼠标点击了一个TD,当前的event.srcEleme ...

  3. js的stopPropagation()、cancelBubble、preventDefault()、return false的分析

    个人笔记,如有错误,望指出. 事件冒泡,举个列子: <li> <a href='http://www.baidu.com'>点击a</a> </li> ...

  4. javascript event(事件对象)详解

    javascript event(事件对象)详解   1. 事件对象     1. 事件对象 Event 对象代表事件的状态,比如事件在其中发生的元素.键盘按键的状态.鼠标的位置.鼠标按钮的状态. 什 ...

  5. javascript event兼容性随笔

    一.前言 function ConvertEvent(e, element) { var event = e || window.event; var resultEvent = { event: e ...

  6. 添加事件及Event对象的兼容写法

    一.事件流 事件流描述的是从页面中接受事件的顺序. IE的事件流是事件冒泡流,而Netscape的事件流是事件捕获流 1.事件冒泡 事件冒泡,即事件最开始由最具体的元素(文档中嵌套层次最深的那个节点) ...

  7. window.event对象详尽解析

    event代表事件的状态,例如触发event对象的元素.鼠标的位置及状态.按下的键等等. event对象只在事件发生的过程中才有效. event的某些属性只对特定的事件有意义.比如,fromEleme ...

  8. JavaScript 中的window.event代表的是事件的状态,jquery事件对象属性,jquery中如何使用event.target

    http://wenda.haosou.com/q/1373868839069215 http://kylines.iteye.com/blog/1660236 http://www.cnblogs. ...

  9. JS的event对象--知识点总结

    Event描述:event代表事件的状态,例如触发event对象的元素.鼠标的位置及状态.按下的键等等. 需要注意的是:event对象只在事件发生的过程中才有效. event的某些属性只对特定的事件有 ...

随机推荐

  1. MySQL 简洁 数据操作 增删改查 记不住的 看这里把

    1.库操作====================== 1.创建 CREATE DATABASE DB2 charset utf8; 2.删除 DROP DATABASE db2; 3.使用(进入) ...

  2. 112th LeetCode Weekly Contest Validate Stack Sequences

    Given two sequences pushed and popped with distinct values, return true if and only if this could ha ...

  3. Spring 操作 jdbc 链接数据库

    1. 新建资源文件 db.properities jdbc.user=root jdbc.password=root jdbc.driverClass=com.mysql.jdbc.Driver jd ...

  4. CAPL编程实现诊断刷写,车联网FOTA流程自动化测试(方案篇)

    原创内容,转载请注明出处 本文围绕车联网的ECU,TBOX的FOTA升级业务展开描述.主要讲如何通过CANoe编程实现自动化测试, 验证TBOX在FOTA业务过程中作为一个诊断仪刷写整车其它ECU的流 ...

  5. kindeditor<=4.1.5文件上传漏洞

    最近发现很多网页篡改与暗链都是利用kindeditor编辑器,于是搜了一下kindeditor的漏洞,发现低于4.1.5版本的存在文件上传的漏洞,可以上传txt,html后缀的文档,许多恶意的文档貌似 ...

  6. RESTful 设计工具和Web框架

    搭建开发环境几乎都搭建失败,因为需要FQ Spring Boot 和 Spring MVC 单独 Jersey官网可以直接访问 https://jersey.java.net/documentatio ...

  7. Java基础22-Static关键字

    1.static关键字 public class Test{ public static void main(String[] args){ Persion p1=new Persion(); Per ...

  8. poi 多行合并

    poi做多行合并,一定需要先绘制单元格,然后写入数据,最后合并,不然各种坑啊. 合并单元格所使用的方法: sheet.addMergedRegion( CellRangeAddress  cellRa ...

  9. 腾讯刘金明:腾讯云 EB 级对象存储架构深度剖析及实践

    欢迎大家前往腾讯云+社区,获取更多腾讯海量技术实践干货哦~ 演讲者:刘金明 腾讯云存储业务中心副总监 背景:5月23-24日,以"焕启"为主题的腾讯"云+未来" ...

  10. Win10新建分区

    今天忽然觉得将系统分为四个盘,有点无法将分类分开,所以增加了几个分区: 1.windows+X键在弹出的对话框中选择磁盘管理,进入如下界面: 2.如果你想从某个盘分出一些内存建立一个新的分区,就在这个 ...