JS阻止父层事件(JS冒泡问题)
&!DOCTYPE html&
&html xmlns="http://www.w3.org/1999/xhtml"&
&meta http-equiv="Content-Type" content="text/ charset=utf-8"/&
&title&&/title&
&script type="text/javascript"&
function fun1 () {
alert("parent");
function funx(){
alert("child");
function stopEvt(e) {
e.stopPropagation();//阻止点击事件向上冒泡
&div onclick="fun1()" style="height:100background-color:color:text-align:border:1px solid red"&
&div onclick="funx();stopEvt(event)" style="background-color:margin-top:20border:1height:30px"&
js阻止事件冒泡的两种方法
JQuery实现(阻止事件冒泡,不触发父级标签点击事件)点击div里面的a的能触发点击事件，但是不触发外面的div的点击事件
html如何点击子元素事件而不触发父元素的点击事件
阻止事件冒泡，阻止默认事件，event.stopPropagation()和event.preventDefault()，return false的区别
js阻止默认事件与js阻止事件冒泡示例分享 js阻止冒泡事件
JS阻止冒泡事件和默认事件（IE和其他浏览器兼容）
阻止子元素继承父元素事件
纯js事件委托模式，委托父元素
Js 冒泡事件阻止
JS 防止父元素事件冒泡触发
没有更多推荐了，有些页面精美异常，但代码却粗陋不堪，一触即塌。立志做精美的页面、写优雅的代码、搭稳健的Dom。...
js阻止冒泡，兼容写法。
有几次遇到a链接里面包含click点击方法，这时候会触发click事件，还会触发a链接跳转。这时候就需要阻止冒泡了。添加event.stopPropagation();就可以了。在chrome上可以使用。本以为万事大吉了，没想到火狐不支持event事件。既然问题来了，就得解决。所以搜遍了百度，得到了以下的代码。//兼容火狐 获取event方法
function getEvent(){
if(window.event){return window.}
func = getEvent.
while(func != null){
var arg0 = func.arguments[0];
if((arg0.constructor == Event || arg0.constructor == MouseEvent
|| arg0.constructor == KeyboardEvent)
|| (typeof(arg0) == "object" && arg0.preventDefault
&& arg0.stopPropagation)){
return arg0;
func = func.
//阻止冒泡到下一个事件
function stopPropagations(){
var ev = getEvent();
if (window.event) {
ev.cancelBubble =
}else if(ev.preventDefault){
ev.stopPropagation();//阻止冒泡
}经过测试，火狐完美运行。自己保存一下，以便以后查找。
js事件冒泡和阻止浏览器默认行为的兼容写法
原生js阻止冒泡，兼容写法
js取消事件冒泡和阻止事件的默认行为（兼容写法）
防止事件冒泡和阻止默认事件的兼容写法
JS阻止冒泡事件和默认事件（IE和其他浏览器兼容）
阻止事件冒泡stopPropagation的兼容写法
阻止冒泡兼容写法
阻止浏览器冒泡事件，兼容firefox和ie
js阻止事件冒泡的两种方法
JS阻止父层事件(JS冒泡问题)
没有更多推荐了，JS冒泡事件的快速解决方法
转载 &更新时间：日 08:47:44 & 作者：
这篇文章主要是对JS冒泡事件的快速解决方法进行了详细的分析介绍，需要的朋友可以过来参考下，希望对大家有所帮助
何为冒泡事件就是当设定了多个div的嵌套时；即建立了父子关系，当父div与子div共同加入了onclick事件时，当触发了子div的onclick事件后，子div进行相应的js操作。但是父div的onclick事件同样会被触发。这就造成了事件的多层并发，导致了页面混乱。这就是冒泡事件。
消除冒泡事件的方法阻止JavaScript事件冒泡传递（cancelBubble 、stopPropagation）
下面的一段代码即可以很好的解释是么是冒泡效果，什么叫消除冒泡效果 代码如下:&html& &head& &title& 阻止JavaScript事件冒泡传递（cancelBubble 、stopPropagation）&/title& &meta name="keywords" content="JavaScript,事件冒泡,cancelBubble,stopPropagation" /& &script type="text/javascript"& function doSomething (obj,evt) { alert(obj.id); var e=(evt)?evt:window. //判断浏览器的类型，在基于ie内核的浏览器中的使用cancelBubbleif (window.event) { e.cancelBubble= } else { //e.preventDefault(); //在基于firefox内核的浏览器中支持做法stopPropagatione.stopPropagation(); } } &/script& &/head& &body& &div id="parent1" onclick="alert(this.id)" style="width:250background-color:yellow"& &p&This is parent1 div.&/p& &div id="child1" onclick="alert(this.id)" style="width:200background-color:orange"& &p&This is child1.&/p& &/div& &p&This is parent1 div.&/p& &/div& &br /& &div id="parent2" onclick="alert(this.id)" style="width:250background-color:"& &p&This is parent2 div.&/p& &div id="child2" onclick="doSomething(this,event);" style="width:200background-color:"& &p&This is child2. Will bubble.&/p& &/div& &p&This is parent2 div.&/p& &/div& &/body& &/html&把代码直接复制后，打开当点击child1时不仅会弹出 child1 对话框还会弹出 parent1
这就是冒泡事件
但是单击chile2只会弹出child2却不会弹出 parent2，这便是应用了阻止冒泡事件的特效的效果.
您可能感兴趣的文章:
大家感兴趣的内容
12345678910
最近更新的内容
常用在线小工具&nbsp>&nbsp
&nbsp>&nbsp
&nbsp>&nbsp
js冒泡事件的特例toggle无法实现阻止冒泡&&slideDown()和slideUp()Script
摘要：一、问题题目及答案展示:要求,点击题目,展开答案。如下:展开前展开后最开始使用的toggle方法来实现$(&.content_problem&).toggle(function(){$(this).find(&.answer&).slideDown();},function(){$(this).find(&.answer&).slideUp();});这个很容易实现效果,但是导致“删除”按钮无法点击,因为冒泡事件。我
题目及答案展示:要求,点击题目,展开答案。如下:
最开始使用的toggle方法来实现
$(&.content_problem&).toggle(function(){$(this).find(&.answer&).slideDown();},function(){$(this).find(&.answer&).slideUp();});
这个很容易实现效果,但是导致“删除”按钮无法点击,因为冒泡事件。
我尝试了使用event.stopPropagation();来组织冒泡,但是没有达到效果。
通过判断元素属性是否是hidden来使用slideDown()和slideUp()
$(document).on(&click&,&.content_problem&,function(){var $answer = $(this).find(&.answer&);if ($answer.is(&:hidden&)) {$answer.stop(true,true).slideDown();} else {$answer.stop(true,true).slideUp();}});
这样实现delete方法时就不用考虑冒泡事件了。
function deleteQuestion(){ $(&.delete&).live(&click&,function(){
var questionId = $(this).parents(&.content_problem&).find(&.questionid&).val();
var area = $(&this&).parents(&.content_problem&);
url : &${ctx}/exercise/deleteWrongQuestion&,
type : &POST&,
dataType : &html&,
&questionId& : questionId,
success : function(data) {
if(data!=0){//返回非0值证明执行成功,需将总题目数量减一,并将该题从页面上移除
var total = parseInt($(&.conTitle&).html())-1;
$(&#pageCount&).val(total);
$(&.conTitle&).html(total);
$(&.page&).trigger('reloadPage',Math.ceil(total/5));//重新分页
Tosn.info({
title : &提示&,
cont : &网络异常,请稍后再试&
return false; });}
以上是的内容，更多
的内容，请您使用右上方搜索功能获取相关信息。
若你要投稿、删除文章请联系邮箱：zixun-group@service.aliyun.com,工作人员会在五个工作日内给你回复。
新用户大礼包！
现在注册，免费体验40+云产品，及域名优惠！
云服务器 ECS
可弹性伸缩、安全稳定、简单易用
&40.8元/月起
预测未发生的攻击
&24元/月起
你可能还喜欢
你可能感兴趣
阿里云教程中心为您免费提供
js冒泡事件的特例toggle无法实现阻止冒泡&&slideDown()和slideUp()Script相关信息，包括
的信息，所有js冒泡事件的特例toggle无法实现阻止冒泡&&slideDown()和slideUp()Script相关内容均不代表阿里云的意见！投稿删除文章请联系邮箱：zixun-group@service.aliyun.com，工作人员会在五个工作日内答复
售前咨询热线
支持与服务
资源和社区
关注阿里云
Internationaljs冒泡事件前几天在老大那里接触到了js的一个新的单词：冒泡事件；
何为冒泡事件。就是当设定了多个div的嵌套时；即建立了父子关系，当父div与子div共同加入了onclick事件时，当触发了子div的onclick事件后，子div进行相应的js操作。但是父div的onclick事件同样会被触发。这就造成了事件的多层并发，导致了页面混乱。这就是冒泡事件。消除冒泡事件的方法阻止JavaScript事件冒泡传递（cancelBubble 、stopPropagation）下面的一段代码即可以很好的解释是么是冒泡效果，什么叫消除冒泡效果
&html& &head& &title& 阻止JavaScript事件冒泡传递（cancelBubble 、stopPropagation）&/title& &meta name="keywords" content="JavaScript,事件冒泡,cancelBubble,stopPropagation" /& &script type="text/javascript"& function doSomething (obj,evt) { alert(obj.id); var e=(evt)?evt:window. //判断浏览器的类型，在基于ie内核的浏览器中的使用cancelBubbleif (window.event) { e.cancelBubble= } else { //e.preventDefault(); //在基于firefox内核的浏览器中支持做法stopPropagatione.stopPropagation(); } } &/script& &/head& &body& &div id="parent1" onclick="alert(this.id)" style="width:250background-color:yellow"& &p&This is parent1 div.&/p& &div id="child1" onclick="alert(this.id)" style="width:200background-color:orange"& &p&This is child1.&/p& &/div& &p&This is parent1 div.&/p& &/div& &br /& &div id="parent2" onclick="alert(this.id)" style="width:250background-color:"& &p&This is parent2 div.&/p& &div id="child2" onclick="doSomething(this,event);" style="width:200background-color:"& &p&This is child2. Will bubble.&/p& &/div& &p&This is parent2 div.&/p& &/div& &/body& &/html&
把代码直接复制后，打开当点击child1时不仅会弹出 child1 对话框还会弹出 parent1
这就是冒泡事件
但是单击chile2只会弹出child2却不会弹出 parent2，这便是应用了阻止冒泡事件的特效的效果.
阅读(...) 评论()