关于DIV 嵌套的时候,阻止祖辈的事件发生

例如:

<div class="dvF">

<div class="dvC">

</div>

</div>

<script  link="jquery.min.js"></script>

<script type="javascript/text">

$(function(){

$(".dvF").click(function(){

alert("触发了祖父层的事件");

});

$(".dvC").click(function(){

event.stopPropagation();  // 当前的操作是阻止父类层事件的发生

alert("触发了当前层的事件");

});

});

</script>

时间: 2024-07-31 11:45:40

关于DIV 嵌套的时候,阻止祖辈的事件发生的相关文章

点击事件阻止缺省事件以及阻止冒泡

1 function stopEvent(e){ 2 stopDefault(e); 3 stopBubble(e); 4 } 5 //阻止缺省事件发生 6 function stopDefault(e){ 7 if(e.preventDefault){ 8 e.preventDefault(); 9 }else{ 10 e.returnValue=false; 11 } 12 } 13 //阻止冒泡发生 14 function stopBubble(e){ 15 if(e.stopPropag

div嵌套div 背景图片 不显示的问题

这几天 在做一个小Demo的时候碰到了如上的问题,一个DIV嵌套多个DIV时,父容器DIV不显示背景图片.同时结合之前碰到类似的问题,我归纳了如下几个解决方法: 1.就是常见的 子div 背景把父div的背景给盖住了,例子: 该例子就是 我有一个父div 和它里面嵌套的一个子div,两个div的宽度和高度大小是一样的,其中父div的背景图片就是上面这张图片(箭头部分是透明的),子div的背景图片是那种渐变灰色图片,其实懂英语的人应该看出来了就是,我想实现一个那种类似于iphone滑动那种灯光从

div嵌套引起的margin-top不起作用

通常大家在制作网页的过程中会遇到很多棘手的问题,比如我在写一个页面的时候,遇到了div嵌套引起的margin-top不起作用,对内部的div设置margin-top时,内部对于外部的div并没有产生一个margin值,而是外部的div相对于上面的div产生了一个margin值,为什么会出现这种情况??? 这是因为嵌套div中margin-top出现转移,在部分浏览器中,两个嵌套的div,如果外层父元素div的padding值为0,那么内层div的margin-top,margin-bottom值

实战案例:DIV嵌套

缘于页面结构语义化的考虑,我们应该慎用div和span这两个通用元素,只有当划分页面结构模块时才使用div元素,因为模块本身是没有任何语义的,他仅代表一块独立的结构.如果想对段落内部分内联元素或文本应用某种特殊样式时,就可以使用span元素把他们独立封装在一个容器内. div作为布局元素,它与表格一样是可以嵌套的.因为浏览器对于任何元素的解析方式都是一样的,一般从最里层开始,然后不断向外解析.当嵌套层级很深时,将会使浏览器消耗更多的资源对嵌套关系进行解析,势必会影响浏览器的速度. 对于一个上下三

解决div嵌套时IE8和FF无法自适应高度

解决div嵌套时IE8和FF无法自适应高度 还是做类似新浪评论回复的时候,将回复的DIV嵌套在一个DIV中,然后点击回复的时候显示子DIV,这是父DIV的高度是会变化的,于是我将父DIV的高度设置为height:auto;可是问题就出现了,在IE6和IE7下父DIV的高度可以自适应而在IE8和FF下却不可以,于是我开始在网上搜索,嘿嘿,现在的网络知识共享真好,让我找到解决办法了! 在父DIV的CSS中添加两个属性值 clear:both; overflow:auto; OK啦!希望对遇到同样问题

div嵌套margin-top失效的解决方法

近日学习过程中,出现一个问题:内外多层div嵌套时,margin-top不起作用,margin-left起作用,查询百度,有结果: 当两个容器嵌套时,如果外层容器和内层容器之间没有别的元素,firefox会把内层元素的margin-top作用与父元素. 经过测试,得如下解决方法,详请见代码中的注释: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/x

理解阻止浏览器默认事件和事件冒泡cancelBubble

一.阻止浏览器默认事件 1.先举个例子说什么是 浏览器的默认事件 : 比如有一个输入框,当我按下字母a,就会在输入框显示字母a.就是浏览器本该发生的事情.小孩子一出生就会汲取母乳一样的道理,这些都是先天,默认好的了. 2.看个demo,阻止浏览器默认的右键弹出菜单,而且弹出自己自定义的菜单.代码如下: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <style type=&

兼容firefox,ie,谷歌,阻止浏览器冒泡事件,Firefox不支持event解决方法

兼容firefox,ie,谷歌,阻止浏览器冒泡事件,Firefox不支持event解决方法 // 获取事件function getEvent(){ if(window.event) {return window.event;} func=getEvent.caller; while(func!=null){ var arg0=func.arguments[0]; if(arg0){ if((arg0.constructor==Event || arg0.constructor ==MouseEv

React中,input外边如果包一个div,可以把input的onChange事件绑定到div上面,并且也生效

最近第一次开始学习封装组件,遇到几个比较神奇的问题. 首先就是如果input外边包一个div,如果把input的onChange事件绑定到div上,也会生效 <div onChange={(e)=>{console.log(e.target.value)}}> <Input/> </div> 还有,如果封装了一个组件,那么里面的最外层元素的{...this.props}需要慎用,虽然这样子做,可以把样式传过来,并且生效,但是会报错 原文地址:https://www