拼多多网站建设过程,网站开发实训的心得,天津网络排名优化,html手机网站一、.stop修饰符
.stop修饰符代表event.stopPropagation()#xff0c;加上这个修饰符#xff0c;就等于在方法中加上了这句代码。
!--阻止单击事件继续传播--
a click.stopdoThis/a上面的代码等同于如下代码。
!--阻止单击事件继…一、.stop修饰符
.stop修饰符代表event.stopPropagation()加上这个修饰符就等于在方法中加上了这句代码。
!--阻止单击事件继续传播--
a click.stopdoThis/a上面的代码等同于如下代码。
!--阻止单击事件继续传播--
doThis(event){
event.stoppropagation()
}二、.prevent修饰符(重要)
.prevent修饰符代表event.preventDefault()加上这个修饰符就等于在方法中加上了这句代码。例如提交submit事件后触发自动刷新页面但是加了这个修饰符之后就不会再触发。
!--提交事件不再重载页面--
form submit.preventonSubmit/form上述代码等同于如下代码。
onSubmit(event){
event.preventDefault()
}三、.capture修饰符
在事件监听器中通常有3个参数监听的事件名称、回调函数和是否设置capture。所谓的capture就是指在事件捕获阶段监听还是在冒泡阶段监听将其设置为true表示在捕获阶段监听设置为false表示在冒泡阶段监听。
element.addEventListener(event-name,callback,{
capture:false,
passive:false,
once:false
});设置.capture修饰符就代表在捕获阶段监听不设置该修饰符则代表在冒泡阶段监听。所谓捕获阶段是指先执行点击元素自身的事件再从外到里依次执行元素内部的事件。而冒泡阶段是先执行内部元素的事件再由里到外执行父级元素的事件。
div v-on:click.capturedoThis.../div相当于
div refdiv/div
const appnew Vue({
el:#app,
mounted(){this.$refs.div.addEventListener(click,doThis,{capture:ture})
}
})四、.passive修饰符
通常在监听时间的时候只有当监听事件的方法执行完成后才会执行默认的操作。例如执行滚动操作当监听页面的滚动事件时只有当方法执行过程结束后页面才会滚动但当在移动端时就会造成滚动卡顿的现象。 添加.passive修饰符等于告诉浏览器不需要等到方法执行完成后再去触发滚动事件而是立刻触发。这样可以提升移动端性能为用户带来流畅的操作体验因此.passive修饰符在移动端的使用比较常见。
div v-on:scroll.passiveonScroll.../div等于
div refdiv.../div
const appnew Vue({
el:app,
mounted(){
this.$refs.div.addEventListener(scroll,onScroll,{passive:true})
}
})
