为网页元素增加resize事件

最新推荐文章于 2024-06-11 15:50:15 发布

zsnpromsie

最新推荐文章于 2024-06-11 15:50:15 发布

阅读量1.5k

点赞数 1

分类专栏： jsvascript css html

本文链接：https://blog.csdn.net/zsnpromsie/article/details/86623560

版权

jsvascript 同时被 3 个专栏收录

40 篇文章 0 订阅

订阅专栏

css

4 篇文章 0 订阅

订阅专栏

html

3 篇文章 0 订阅

订阅专栏

<!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>
    <style>
       html,body {
           width: 100%;
           height: 100%;
       }
      .resize {
          width: 40%;
          height: 40%;
          background-color: aqua;
      }
    </style>
</head>
<div class="resize"></div>
<body>
    <script>
    // 为网页元素增加resize事件
    // 默认只有window支持resize事件，但有时我们需要为div等元素添加resize事件
    // 代码见下面，原理是在元素内添加一个内嵌html，然后监听这个内嵌html的resize事件
    // pointer-events: none 元素永远不会成为鼠标事件的target。但是，当其后代元素的pointer-events属性指定其他值时，
    // 鼠标事件可以指向后代元素，在这种情况下，鼠标事件将在捕获或冒泡阶触发父元素的事件侦听器。
    class ResizeEventService {
       constructor() {
           this.isIE = /Trident/.test(navigator.userAgent)
       }
       addResizeListener(element, fn) {
           const self = this
           if (!element._resizeListeners_ || !element._resizeListeners_.length) {
               element._resizeListeners_ = []
               if (getComputedStyle(element).position === 'static') {
                   element.style.position = 'relative'
               }
               const obj = element._resizeTrigger_ = document.createElement('object')
               obj.setAttribute('style', `
               display: block; position: absolute; top: 0px; left: 0px; height: 100%;
               width: 100%; overflow: hidden; pointer-events: none; z-index: -1;
               `)
               obj._resizeElement = element
               // contentDocumnet 拿到文档对象模型
               // defaultView 拿到文档对象模型关联的对象模型
               obj.onload = function () {
                   this.contentDocument.defaultView._resizeTrigger_ = this._resizeElement
                   this.contentDocument.defaultView.addEventListener('resize', self.resizeListener)
               }
               obj.type = 'text/html'
               if (this.isIE) {
                   element.appendChild(obj)
               }
               obj.data = 'about: blank'
               if (!this.isIE) {
                   element.appendChild(obj)
               }
           }
           element._resizeListeners_.push(fn)
       }
       removeResizeListener(element, fn) {
           if (!element._resizeListeners_) {
               return
           }
           element._resizeListeners_.splice(element._resizeListeners_.indexOf(fn), 1)
           if (!element._resizeListeners_.length) {
               element._resizeTrigger_.contentDocument.defaultView.removeEventListener('resize',this.resizeListener)
               element._resizeTrigger_ = !element.removeChild(element._resizeTrigger_)
           }
       }
       resizeListener(e) {
           const win = e.target || e.srcElement
           if (win._resizeRAF_) {
               window.cancelAnimationFrame(win._resizeRAF_)
           }
           win._resizeRAF_ = window.requestAnimationFrame(function() {
               const trigger = win._resizeTrigger_
               trigger._resizeListeners_.forEach(fn => {
                   fn.call(trigger, e)
               });
           })
       }
    }
    let resize = new ResizeEventService()
    resize.addResizeListener(document.querySelector('.resize'), (e) => {
        console.log(e)
    })
    </script>
</body>
</html>

zsnpromsie

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
为网页元素增加resize事件

&lt;!DOCTYPE html&gt;&lt;html lang="en"&gt;&lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;meta name="viewport" content="width=device-width, initial-scale=1.0"&gt;
复制链接

扫一扫

专栏目录