7.1随笔

一、水平滚动条、垂直滚动条

 

 

 

overflow内容溢出时的设置(设定被设定对象是否显示滚动条)   

 

  overflow-x水平方向内容溢出时的设置   

 

  overflow-y垂直方向内容溢出时的设置   

 

 

 

二、offsetX与offsetY

 

 

 

鼠标相对于事件源元素(srcElement)的X,Y坐标,只有IE事件有这2个属性,标准事件没有对应的属性。

 

 

 

三、什么是事件冒泡

 

在一个对象上触发某类事件(比如单击onclick事件),如果此对象定义了此事件的处理程序,那么此事件就会调用这个处理程序,如果没有定义此事件处理程序或者事件返回true,那么这个事件会向这个对象的父级对象传播,从里到外,直至它被处理(父级对象所有同类事件都将被激活),或者它到达了对象层次的最顶层,即document对象(有些浏览器是window)。

 

 

 

打个比方说:你在地方法院要上诉一件案子,如果地方没有处理此类案件的法院,地方相关部门会帮你继续往上级法院上诉,比如从市级到省级,直至到中央法院,最终使你的案件得以处理

 

 

 

四、怎么阻止事件冒泡

 

 

 

由此可以看出: 

 

1.event.stopPropagation(); 

 

事件处理过程中,阻止了事件冒泡,但不会阻击默认行为(它就执行了超链接的跳转) 

 

2.returnfalse; 

 

事件处理过程中,阻止了事件冒泡,也阻止了默认行为(比如刚才它就没有执行超链接的跳转) 

 

还有一种有冒泡有关的: 

 

3.event.preventDefault(); 

 

如果把它放在头部A标签的click事件中,点击“点击我”。 

 

会发现它依次弹出:我是最里层---->我是中间层---->我是最外层,但最后却没有跳转到百度 

 

它的作用是:事件处理过程中,不阻击事件冒泡,但阻击默认行为(它只执行所有弹框,却没有执行超链接跳转)

 

 

 

五、事件冒泡怎么传递

 

<div id=1 onclick="a()">

 

   <div id=2>

 

   </div>

 

</div>

 

#1包括#2,当点击#1区域任何位置时(包括#2),都会触发a事件。想要阻止点击#2区域时触发a事件,需要在#2区域内加入阻止事件冒泡的代码。

 

变成

 

<div id=1 onclick="a()">

 

   <div id=2 onclick="stopBubble(this.id)">

 

   </div>

 

</div>

 

其中javascript代码为(以下代码没有区别中英文字符,不能直接复制):

 

 

 

function a(){

 

//这里是a事件的代码}

 

 

 

function stopBubble(e) {   

 

   if (e && e.stopPropagation) {//非IE浏览器  

 

        e.stopPropagation();    

 

     }    

 

     else {//IE浏览器

 

         window.event.cancelBubble = true;   

 

     }   

 

 }

 

0 0

 

 

 

暂无评论,我去发表~

 

 

 

我的热门文章

 

bootstrap-select用法

 

Bootstrap Paginator 分页插件使用

 

前端js与css兼容性问题

 

WebAPP输入框被软键盘遮挡肿么办?

 

html5实现下拉刷新,上拉加载

 

 

 

相关博文

 

阻止子元素继承父元素事件

 

js 阻止子元素事件 冒泡 到 父元素

 

阻止checkbox的父元素事件冒泡

 

前端面试宝典超

 

javascript 阻止事件元素默认行为和传播(冒泡)

 

前端面试宝典(内容很多,也有很多重复)

 

利用事件冒泡(Event Bubbling )获取鼠标下的元素属性

 

javascript 点击子元素时不触发父元素的点击事件

 

 

 

六、阻止浏览器默认事件

 

w3c的方法是e.preventDefault(),IE则是使用e.returnValue = false; preventDefault它是事件对象(Event)的一个方法,作用是取消一个目标元素的默认行为。既然是说默认行为,当然是元素必须有默认行为才能被取消,如果元素本身就没有默认行为,调用当然就无效了。什么元素有默认行为呢?如链接,提交按钮等。当Event 对象的 cancelable为false时,表示没有默认行为,这时即使有默认行为,调用preventDefault也是不会起作用的。

posted @ 2017-07-03 08:02  云随风走  阅读(110)  评论(0编辑  收藏  举报