7.1随笔

Posted 2020-09-26

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

 

 

 

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也是不会起作用的。