event.cancelBubble=true
<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的更多相关文章
- JS——取消事件冒泡,实现div的显示与隐藏 event.cancelBubble = true;
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- 【转载】设置event.cancelBubble,使触发子元素的onclick不同时触发父元素的onclick
由于HTML中的对象都是层次结构,比如一个Table包含了多个TR,一个TR包含了多个TD Bubble就是一个事件可以从子节点向父节点传递,比如鼠标点击了一个TD,当前的event.srcEleme ...
- js的stopPropagation()、cancelBubble、preventDefault()、return false的分析
个人笔记,如有错误,望指出. 事件冒泡,举个列子: <li> <a href='http://www.baidu.com'>点击a</a> </li> ...
- javascript event(事件对象)详解
javascript event(事件对象)详解 1. 事件对象 1. 事件对象 Event 对象代表事件的状态,比如事件在其中发生的元素.键盘按键的状态.鼠标的位置.鼠标按钮的状态. 什 ...
- javascript event兼容性随笔
一.前言 function ConvertEvent(e, element) { var event = e || window.event; var resultEvent = { event: e ...
- 添加事件及Event对象的兼容写法
一.事件流 事件流描述的是从页面中接受事件的顺序. IE的事件流是事件冒泡流,而Netscape的事件流是事件捕获流 1.事件冒泡 事件冒泡,即事件最开始由最具体的元素(文档中嵌套层次最深的那个节点) ...
- window.event对象详尽解析
event代表事件的状态,例如触发event对象的元素.鼠标的位置及状态.按下的键等等. event对象只在事件发生的过程中才有效. event的某些属性只对特定的事件有意义.比如,fromEleme ...
- JavaScript 中的window.event代表的是事件的状态,jquery事件对象属性,jquery中如何使用event.target
http://wenda.haosou.com/q/1373868839069215 http://kylines.iteye.com/blog/1660236 http://www.cnblogs. ...
- JS的event对象--知识点总结
Event描述:event代表事件的状态,例如触发event对象的元素.鼠标的位置及状态.按下的键等等. 需要注意的是:event对象只在事件发生的过程中才有效. event的某些属性只对特定的事件有 ...
随机推荐
- 栈 - 20 Valid Parentheses, 150 Evaluate Reverse Polish Notation
class Solution { public: bool isValid(string s) { stack<char> st; ; i<s.size(); i++){ if(s[ ...
- springboot(五)-使用Redis
Redis服务器 springboot要使用redis,首先当然要确保redis服务器能够正常跑起来. pom.xml 这里添加redis的依赖,当然也是springboot集成好的. <!-- ...
- swiper、fullPage、hammer几种滑动插件对比
1.使用hammer,自己实现滑动垂直切换页面 <!DOCTYPE html> <html lang="en"> <head> <titl ...
- Oracle9i之xmltype应用(2)
Oracle 9i提供的XML内置特性: Oracle 9i支持XMLType类型,它是一种Oracle 9i系统定义的对象类型.XMLType有内置的函数,有力的提供了推XML的创建,索检,索引等功 ...
- 2.在centos7虚拟机搭建nginx网站
1.nginx配置目录 cd /etc/nginx/conf.d/ 添加 vi www.18cat.conf server{ listen 80; server_name www.18cat.com; ...
- Spark 概念学习系列之从spark架构中透视job(十六)
本博文的主要内容如下: 1.通过案例观察Spark架构 2.手动绘制Spark内部架构 3.Spark Job的逻辑视图解析 4.Spark Job的物理视图解析 1.通过案例观察Spark架构 s ...
- 手指静脉细化算法过程原理解析 以及python实现细化算法
原文作者:aircraft 原文地址:https://www.cnblogs.com/DOMLX/p/8672489.html 文中的一些图片以及思想很多都是参考https://www.cnblogs ...
- HDU 4460 Friend Chains
Problem Description For a group of people, there is an idea that everyone is equals to or less than ...
- 信号和槽:Qt中最差劲的创造
不要被这个标题唬住了,实际上我是非常认可Qt的.在C++实现的开源产品中没有哪一个的API风格比得上Qt,拥有高度一致性,符合常识,符合直觉,几乎不用学就可以直接上手.或许是由于我们摆脱不了马太效应的 ...
- angular2 遇到的问题汇总
angular2 学习资源集锦:https://github.com/timjacobi/angular2-education 在学习angular开发项目过程遇到的问题: 1. 不同componen ...