冒泡默认捕获蒙版禁止滚动

web修理工

已于 2022-09-09 14:42:27 修改

阅读量341

点赞数

分类专栏： JavaScript 文章标签： javascript 前端 vue.js

于 2020-08-12 14:55:01 首次发布

本文链接：https://blog.csdn.net/qq_42374676/article/details/107957417

版权

JavaScript 专栏收录该内容

163 篇文章 2 订阅

订阅专栏

参考:https://www.jianshu.com/p/2b4a8a6507f1


<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>

<body>
    <script>
        //添加禁止屏幕滚动
        //addEventListener 委托事件 (事件, 函数名,false/冒泡|true/捕获) 默认是false 捕获
        document.body.addEventListener('touchmove', stopScroll, false);

        //移除禁止滚动事件监听

        document.body.removeEventListener('touchmove', stopScroll, false);

        //禁止默认行为方法

        function stopScroll(e) {
            // 默认行为
            e.preventDefault()
            // 冒泡
            e.stopPropagation()

        }

    </script>
</body>

</html>

捕获是指从根节点传递到目标阶段（Target Phase）可以用于事件委托 addEventListener(‘click’,(e)=>{

},false) 可以节约性能在节点外面

目标阶段（Target Phase）

冒泡目标阶段（Target Phase）传递到根目录指像气泡一样向上传递

vue 处理冒泡默认事件

//  vue解决方案
 <div @touchmove.stop.prevent></div>

<div @click.stop=''>冒泡</div>

<div @click.prevent="">默认事件</div>
// 换行
// white-space : pre/nowrap/pre-wrap /pre-line/
// innerHTML模板

蒙版处理滑动处理

1.在根元上加高度 overflow:hidden
2.滚动事件 @Scroll= e.target.scrollTop=0
3.在蒙版上禁止 click scroll touchmove 三个事件

@click.stop.prevent="stop($event)" @touchmove.stop.prevent="" @scroll.stop.prevent=""

  stop(e) {
      e.stopPropagation();
      e.preventDefault();
      return false;
    },

// pc 禁止滚动

// css
 html,body{
    height:100%
    }
// js
document.body.style.overflowY='hedden'
document.body.style.overflowY='auto'

---------------------------------
  document.body.addEventListener('touchmove', stopScroll, false);
  //移除禁止滚动事件监听
  document.body.removeEventListener('touchmove', stopScroll, false);
  //禁止默认行为方法
  function stopScroll(e) {
     // 默认行为
   e.preventDefault()
     // 冒泡
   e.stopPropagation()
        }

// h5 禁止滚动

 <div @touchmove.stop.prevent></div>

<div @click.stop=''>冒泡</div>

<div @click.prevent="">默认事件</div>
//--------------------------------------------
 html,body{
    height:100%
    }
// js
document.body.style.overflowY='hedden'
document.body.style.overflowY='auto'

---------------------------------
  document.body.addEventListener('touchmove', stopScroll, false);
  //移除禁止滚动事件监听
  document.body.removeEventListener('touchmove', stopScroll, false);
  //禁止默认行为方法
  function stopScroll(e) {
     // 默认行为
   e.preventDefault()
     // 冒泡
   e.stopPropagation()
        }

pc /h5 滚动置顶

document.documentElement.scrollTop = 0

window.scrollTo( 0, 1000 );  // x 轴  y轴

网页可见区域宽：document.body.clientWidth 
网页可见区域高：document.body.clientHeight 
网页可见区域宽：document.body.offsetWidth (包括边线的宽) 
网页可见区域高：document.body.offsetHeight (包括边线的宽) 
网页正文全文宽：document.body.scrollWidth 
网页正文全文高：document.body.scrollHeight 
网页被卷去的高：document.body.scrollTop 
网页被卷去的左：document.body.scrollLeft 
网页正文部分上：window.screenTop 
网页正文部分左：window.screenLeft 
屏幕分辨率的高：window.screen.height 
屏幕分辨率的宽：window.screen.width 
屏幕可用工作区高度：window.screen.availHeight 
屏幕可用工作区宽度：window.screen.availWidth