<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. 栈 - 20 Valid Parentheses, 150 Evaluate Reverse Polish Notation

    class Solution { public: bool isValid(string s) { stack<char> st; ; i<s.size(); i++){ if(s[ ...

  2. springboot(五)-使用Redis

    Redis服务器 springboot要使用redis,首先当然要确保redis服务器能够正常跑起来. pom.xml 这里添加redis的依赖,当然也是springboot集成好的. <!-- ...

  3. swiper、fullPage、hammer几种滑动插件对比

    1.使用hammer,自己实现滑动垂直切换页面 <!DOCTYPE html> <html lang="en"> <head> <titl ...

  4. Oracle9i之xmltype应用(2)

    Oracle 9i提供的XML内置特性: Oracle 9i支持XMLType类型,它是一种Oracle 9i系统定义的对象类型.XMLType有内置的函数,有力的提供了推XML的创建,索检,索引等功 ...

  5. 2.在centos7虚拟机搭建nginx网站

    1.nginx配置目录 cd /etc/nginx/conf.d/ 添加 vi www.18cat.conf server{ listen 80; server_name www.18cat.com; ...

  6. Spark 概念学习系列之从spark架构中透视job(十六)

    本博文的主要内容如下:  1.通过案例观察Spark架构 2.手动绘制Spark内部架构 3.Spark Job的逻辑视图解析 4.Spark Job的物理视图解析 1.通过案例观察Spark架构 s ...

  7. 手指静脉细化算法过程原理解析 以及python实现细化算法

    原文作者:aircraft 原文地址:https://www.cnblogs.com/DOMLX/p/8672489.html 文中的一些图片以及思想很多都是参考https://www.cnblogs ...

  8. HDU 4460 Friend Chains

    Problem Description For a group of people, there is an idea that everyone is equals to or less than ...

  9. 信号和槽:Qt中最差劲的创造

    不要被这个标题唬住了,实际上我是非常认可Qt的.在C++实现的开源产品中没有哪一个的API风格比得上Qt,拥有高度一致性,符合常识,符合直觉,几乎不用学就可以直接上手.或许是由于我们摆脱不了马太效应的 ...

  10. angular2 遇到的问题汇总

    angular2 学习资源集锦:https://github.com/timjacobi/angular2-education 在学习angular开发项目过程遇到的问题: 1. 不同componen ...