使固定子div不会阻止父目录滚动 - 腾讯云开发者社区 - 腾讯云

开发者社区

文档建议反馈控制台

最新优惠活动

文章/答案/技术大牛

发布

：第三章 - 事件修饰符的使用

这一差异，也使我们在写代码中需要考虑如何去处理 DOM 的事件细节。为了解决这一问题，vue 给我们提供了事件修饰符这一利器，它使我们的方法只有纯粹的数据逻辑，而不是去处理 DOM 事件细节。　　...2、事件修饰符　　a）.stop：阻止事件冒泡　　在下面的示例中，我们分别创建了一个 button 的点击事件和外侧的 div 的点击事件，根据事件的冒泡机制我们可以得知，当我们点击了按钮之后，会扩散到父元素...，从而触发父元素的点击事件，具体的结果也如下图所示： 1 2 <div id="div1" @click="divHandlerClick...例如在下面的代码中，只有第一次点击时才会触发绑定的事件，之后点击都不会触发。...　　在页面滚动的时候，浏览器会在整个事件处理完毕之后再触发滚动，因为浏览器并不知道这个事件是否在其处理函数中被调用了 event.preventDefault()，而 passive 修饰符用来进一步告诉浏览器这个事件的默认行为不会被取消

8213 0

jQuery 写法示例

el.each(function( index ) { console.log( index + ": " + $( this ).text() ); }); 创建元素 var $newEl = $('<div...el.position().left $el.offset() // 相对于浏览器窗口 $el.offset({ top: 10, left: 20px }) $el.scrollTop(20) //滚动条滚动...20px 父元素滚动到指定子元素的位置 $wrap.scrollTop($child.position().top) 注意：父元素需要是定位元素（position 不为 static）。..., '.child', function(){}) $el.off('click') $el.click(function(event){ event.stopPropagation(); // 阻止事件冒泡...event.preventDefault(); // 阻止元素的默认行为 event.target;// 触发事件的元素 event.currentTarget === this; //

8432 0

您找到你想要的搜索结果了吗？

是的

没有找到

前端面试题2（CSS）

checked 选择被选中的表单元素 :after 在元素内部最前添加内容 :before 在元素内部最后添加内容 :nth-child(n) 匹配父元素下指定子元素...，在所有子元素中排序第n :nth-last-child(n) 匹配父元素下指定子元素，在所有子元素中排序第n，从后向前数 :nth-child(odd) :nth-child(even) :nth-child...(3n+1) :first-child :last-child :only-child :nth-of-type(n) 匹配父元素下指定子元素，在同类子元素中排序第n :nth-last-of-type...(n) 匹配父元素下指定子元素，在同类子元素中排序第n，从后向前数 :nth-of-type(odd) :nth-of-type(even) :nth-of-type(3n+1) :first-of-type...添加额外标签，例如使用 br 标签和其自身的 clear 属性，例如父元素设置 overflow

2.8K1 1

JS事件篇

.appendChild()----向一个父节点中添加一个子节点整合上面操作的小案例父节点.insertBefore(新节点，旧节点): 在指定子节点前插入新的子节点父节点.replaceChild...(新节点，旧节点)：使用指定的子节点替换已有的子节点父节点.removeChild(子节点)：删除子节点使用innerHTML也可以完成DOM的增删改操作阻止a标签默认行为的常用三种方式 a标签的索引问题....insertBefore(新节点，旧节点): 在指定子节点前插入新的子节点 <!....removeChild(子节点)：删除子节点 ---- 使用innerHTML也可以完成DOM的增删改操作 ---- 阻止a标签默认行为的常用三种方式 (1) < a href=“javascript...---- 解决浏览器兼容性常使用以下写法 //针对IE8以下浏览器不会将事件对象传入到事件函数的参数中 event=event||window.event; //针对浏览器滚动条归属权的不同做出的兼容性写法

12.6K1 0

【建议收藏】面试官贼喜欢问的 32+ vue 修饰符，你掌握几种啦？

文件目录结构目录结构（已去除其他文件目录）大概如下 ├── package.json └── src ├── App.vue ├── main.js ├── router.js...首先可以明确的是点击上面和下面的子节点都不会触发父节点的点击事件点击下面的父节点会打印出我是父节点，但是不会跳转掘金点击上面的父节点会打印出我是父节点,也不会跳转掘金但是点击上面的子节点，父节点会不会跳转至掘金呢...而点击span元素时，由于冒泡的缘故，点击事件会传递给a，但是此时a会判断出该事件不是由自身触发的也就不会阻止默认事件(此时也就发生跳转了)，当然也不会触发onClickParent回调同理来我们分析一下...-- 滚动事件的默认行为 (即滚动行为) 将会立即触发 --> 这个修饰符对于滚动性能的提升，一直没找到合适的例子，跪求广大掘友有例子啊这个修饰符对于滚动性能的提升，一直没找到合适的例子，跪求广大掘友有例子啊这个修饰符对于滚动性能的提升，一直没找到合适的例子

2.6K1 0

css中绝对定位_绝对定位和相对定位怎么用

文章目录相对定位 position: relative; 特性用途绝对定位 position: absolute; 绝对定位参考点单独盒子绝对定位参考点：父辈元素设置了相对定位，则子元素绝对定位以父辈元素为参考点...用途 1.微调元素位置 2.做绝对定位的参考（父相子绝） *{ padding: 0; margin: 0; } div{...父相子绝，父绝子绝，父固子绝,都是以父辈元素为参考点。父绝子绝，因为绝对定位脱离标准流，影响页面的布局。父相子绝是常用的布局方案。...margin: 0; } p{ width: 100px; height: 100px; background-color: red; /*固定定位：固定当前的元素不会随着页面滚动而滚动...，特性：1.脱标 2.提升层级 3.固定不变不会随页面滚动而滚动参考点：设置固定定位，用top描述。

2.5K3 0

前端学习(51)~事件的传播和事件冒泡

通俗来讲，冒泡指的是：子元素的事件被触发时，父元素的同样的事件也会被触发。取消冒泡就是取消这种机制。...意思是，事件不会往父元素那里传递。我们检查一个元素是否会冒泡，可以通过事件的以下参数： event.bubbles 如果返回值为true，说明该事件会冒泡；反之则相反。...，产生的效果是：事件不会继续传递到 father、grandfather、body了。...type="text/javascript"> window.onload = function() { /* * 使div...兼容的方式获取event对象 event = event || window.event; // 鼠标在页面的位置 = 滚动条滚动的距离

9172 0

vue.js中实现阻止事件冒泡

当父子元素中都有点击事件的时候，为了让触发子元素中的事件时，不去触发父元素中的事件，可以在子元素事件中添加stop来阻止事件冒泡。....stop 是阻止冒泡行为,不让当前元素的事件继续往外触发,如阻止点击div内部事件,触发div事件 .prevent 是阻止事件本身行为,如阻止超链接的点击跳转,form表单的点击提交 .self 是只有是自己触发的自己才会执行...,当第二次触发的时候事件本身的行为会执行 .passive 滚动事件的默认行为 (即滚动行为) 将会立即触发，而不会等待 onScroll 完成。...阻止click事件冒泡(防止触发另一个事件)的方法使用vue阻止子级元素的click事件冒泡。... 这样点击div里面的按钮1，就不会触发div绑定时间test1()方法。

6K1 0

理解CSS布局和块格式化上下文

BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素，并且容器元素不会影响兄弟元素的布局。...常见应用场景使父元素包含浮动元素下面例子解释如何让浮动内容和父元素等高，清楚浮动负面影响 html I am a floated...[enter image description here] 这时候为父元素设置overflow: auto或者除invisible默认值之外的任何有效值都能创建BFC解决这个问题，使父元素包含浮动元素...设置浮动的情况下，我可以通过使右边div成为BFC，使两个兄弟div互相隔离、互不影响，从而达到去除文字环绕的效果。...，此时滚动条就变成了这种方式的副作用，因此display有个新的属性flow-root可以在任何需要创建BFC场景下使用，它并且不会带来任何副作用。

2.1K3 0

2016.06 第三周群问题分享

webkit-box; display: -moz-box; display: -ms-box; display: -o-box; display: box; /*规定子元素水平排列还是垂直排列...autoplay属性在iOS及Android上无法使用，在PC端能够正常使用； 2.audio元素没有设置controls时，在iOS及Android会占据空间大小，而在PC端Chrome浏览器是不会占据任何空间...通常我们为了防止页面的滚动，会调用event的preventDefault()可以阻止默认事件的发生，达到阻止页面滚动的效果 touchend——当手指离开屏幕时触发 touchcancel——系统停止跟踪触摸时会触发...通常我们再滑屏页面，会调用css的html{-ms-touch-action: none;}可以阻止默认情况的发生：阻止页面滚动 MSPointerUp——当手指离开屏幕时触发如何用jQuery实现两个...div等高 2016.06.20~2016.06.24 核心内容 jQuery 参考答案有时你希望无论两个 div 各自包含什么内容，它们总有相同的高度： $('.div').css('min-height

9569 0

面试官：Vue常用的修饰符有哪些?有什么应用场景?

因此，用 v-on:click.prevent.self 会阻止所有的点击，而 v-on:click.self.prevent 只会阻止对元素自身的点击 once 绑定了事件以后只能触发一次，第二次就不会触发...ok capture 使事件触发从包含这个元素的顶层开始往下触发 obj4 // 输出结构: 1 2 4 3 passive 在移动端，当我们在监听元素滚动事件的时候，会一直触发...-- 滚动事件的默认行为 (即滚动行为) 将会立即触发 --> <!...Vue.config.keyCodes.f2 = 113 v-bind修饰符 v-bind修饰符主要是为属性进行操作，用来分别有如下： async prop camel async 能对props进行一个双向绑定 //父组件

4.3K3 1

控制页面的滚动:自定义下拉到刷新和溢出效果

(胡迪宁),也就是css中也可以写变量等知识,如果文有误导的地方,欢迎路过的老师拍砖指正目录背景,滚动边界与滚动链接引入overscroll行为(对应的三个属性值,auto,contain,none...但是请注意，如果用户继续滚动会发生什么情况。抽屉后面的内容开始滚动！滚动由父容器占领;例子中的主页面本身被证实这种行为称为滚动链接;滚动内容时浏览器的默认行为。...最好的部分是，使用overscroll行为不会对页面性能产生负面影响该属性有三个可能的值 auto - 默认,源于元素的滚动可能会传播给祖先(父级)元素 contain - 防止滚动链接。.../div> 没有之一在此窗口中滚动不会滚动页面后面的页面...(示例效果) 总结本文主要是针对页面上的滚动,自定义下拉刷新与溢出效果,通过css中的overscroll-behavior:container阻止滚动链接,也就是在触发子元素的事件操作时,不会传递给父级元素

3.2K2 0

什么是BFC

它之所以会出现，也是因为监听scroll事件来实现粘性布局使浏览器进入慢滚动的模式，这与浏览器想要通过硬件加速来提升滚动的体验是相悖的。...，如果不想让父元素塌陷的话，我们一般会写一个清除浮动的元素或伪类，但是BFC却无需这样： ...如此就可以做到不用特意清除浮动，父元素也不会塌陷。...2.BFC 可以阻止元素被浮动元素覆盖我们来看下面一个例子 <div style="height: 100px;width: 100px;float: left;background: lightblue...左浮动的元素会盖住未浮动元素一部分区域，但是文字不会被覆盖，形成了文字环绕的效果，如果不想这样，我们可以采用BFC的方式，和上面的例子相同，添加一个overflow:hidden来触发BFC即可 <div

8232 0

Vue这些修饰符帮我节省20%的开发时间

为了方便大家写代码，vue.js给大家提供了很多方便的修饰符，比如我们经常用到的取消冒泡，阻止默认事件等等~ 目录表单修饰符事件修饰符鼠标按键修饰符键值修饰符 v-bind修饰符（实在不知道叫啥名字... ok//只输出1 .prevent 用于阻止事件的默认行为...像下面所示，刚刚我们从.stop时候知道子元素会冒泡到父元素导致触发父元素的点击事件，当我们加了这个.self以后，我们点击button不会触发父元素的点击事件shout，只有当点击到父元素的时候（蓝色背景...="shout(1)">ok .once 这个修饰符的用法也是和名字一样简单粗暴，只能用一次，绑定了事件以后只能触发一次，第二次就不会触发。...-- 滚动事件的默认行为 (即滚动行为) 将会立即触发 --><!

1K0 0

JQ事件和事件对象

（增加阻止事件冒泡功能） mouseover...而focusout可以在父元素上检测子元素失去焦点情况四其他事件 1 scroll（）滚动滚动条时触发的事件 2 resize（）当调整窗口大小时触发的事件 //小案例（当滚动到一定高度出现搜索菜单... //screenX/screenY 获取显示器屏幕位置的坐标 //整个屏幕的高度不会随着滚动条变化而变化 //clientX/clientY 获取相当于页面视口的坐标...//除去上下窗口不会随着滚动条变化而变化 client screen...以下是主要的鼠标按钮映射代码对应表 Event.which属性值对应的鼠标按钮 1 鼠标左健 2 鼠标中健（滚轮键） 3 鼠标右健 6 event.preventDefault() 阻止事件的默认行为

4.1K2 0

Vue修饰符

比如一个div里面有个按钮，div和按钮都有事件，我们点击按钮，div绑定的方法也会触发，如果div的click加上self，只有点击到div的时候才会触发，变相的算是阻止冒泡： .once：只能用一次，无论点击几次，执行一次之后都不会再执行： .capture：事件的完整机制是捕获-...-- 滚动事件的默认行为 (即滚动行为) 将会立即触发 --> .native：组件绑定当前组件的事件是不会触发的，需要用native才能触发：鼠标.left....sync 对prop进行双向绑定，个人暂时用不习惯： //父组件 //子组件 this.

3762 0

利用交叉观察者这个小宝贝儿，轻松实现懒加载、吸顶、触底

为什么要举例以上两种情况呢，因为entries是返回当前已监听并且发生了交叉的目标集合，第一种情况，大家都一起发生交叉，固每次返回的集合长度都为三；第二种情况则是每个目标轮流发生交叉，且当前只触发了一个...指定父元素假设html如下: 然后开始监听： let child = document.querySelector...该方法还有一个好处，那就是当页面上某个节点存在横向滚动条的时候，一样应对自如： ?...传统的懒加载只是监听全局滚动条的滚动，像这种小细节还是无法实现的（传统的实现方法并不是判断目标是否出现在视窗，所以横向的图片会一起加载，即使你没有向左滑动），所以这也是交叉观察者的一大优点✅ 2....这样，即使nav脱离的文档流，也不会影响参考元素的位置： ? 4.

6172 0

利用交叉观察者这个小宝贝儿，轻松实现懒加载、吸顶、触底

为什么要举例以上两种情况呢，因为entries是返回当前已监听并且发生了交叉的目标集合，第一种情况，大家都一起发生交叉，固每次返回的集合长度都为三；第二种情况则是每个目标轮流发生交叉，且当前只触发了一个...指定父元素假设html如下: 然后开始监听： let child = document.querySelector...该方法还有一个好处，那就是当页面上某个节点存在横向滚动条的时候，一样应对自如： ?...传统的懒加载只是监听全局滚动条的滚动，像这种小细节还是无法实现的（传统的实现方法并不是判断目标是否出现在视窗，所以横向的图片会一起加载，即使你没有向左滑动），所以这也是交叉观察者的一大优点✅ 2....这样，即使nav脱离的文档流，也不会影响参考元素的位置： ? 4.

1.4K4 0

Vue这些修饰符帮我节省20%的开发时间

~ 目录表单修饰符事件修饰符鼠标按键修饰符键值修饰符 v-bind修饰符（实在不知道叫啥名字）表单修饰符填写表单，最常用的是什么？... ok//只输出1 .prevent 用于阻止事件的默认行为...像下面所示，刚刚我们从.stop时候知道子元素会冒泡到父元素导致触发父元素的点击事件，当我们加了这个.self以后，我们点击button不会触发父元素的点击事件shout，只有当点击到父元素的时候（蓝色背景...-- 滚动事件的默认行为 (即滚动行为) 将会立即触发 --> .native 我们经常会写很多的小组件，有些小组件可能会绑定一些事件，但是，像下面这样绑定事件是不会触发的 </My-component

9201 0

从 antDesign 来窥探移动端“滚动穿透”行为

比如上方图片中有两个元素，一个为红色边框存在滚动条的父元素，另一个则为蓝色边框黑色背景不存在滚动条的子元素。当我们拖动不可滚动的子元素时，实际会意外造成父元素会跟随滚动。...继续沿着相同方向进行拖动，此时浏览器会寻找当前元素最近的可滚动祖先元素从而意外触发祖先元素的滚动。同样，动画中红色边框为拥有滚动区域的父元素，蓝色边框为父元素中同样拥有滚动区域的子元素。...手册上仅仅明确了，滚动事件的 Target 可以是 Document 以及里边的 Element ，当 Target 为 Document 时事件会发生冒泡，而 Target 为 Element 时并不会发生冒泡...如果在上述的范围内，祖先元素中不存在可滚动的元素，表示整个区域实际上是不可滚动的。那么不需要触发任何父元素的意外滚动行为，直接进行 event.preventDefault() 阻止默认。...其次，如果该元素已经滚动了顶部/底部，此时我们需要调用 event.preventDefault() 阻止继续相同方向滚动时的父元素意外滚动行为。

3252 0

点击加载更多

扫码

添加站长进交流群

领取专属 10元无门槛券

手把手带您无忧上云

扫码加入开发者社群

相关资讯

热门标签

活动推荐

运营活动

活动名称

广告关闭