javascript - RemoveEventListener 当用户调整窗口大小时

Question

我按照教程创建了 slider 效果。问题是效果在较小的屏幕上看起来不太好。我可以很容易地使用媒体查询处理样式，问题是 javascript 不是这种情况。这是我的代码:

HTML:

<div id="wrapper" class="skewed">
  <div class="layer bottom">
    <div class="content-wrap">
      <div class="content-body content-body-bottom">
        <h2>Lorem Ipsum</h2>
        <p>Blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah</p>
      </div>

      <div class="bg"></div>
    </div>
  </div>

  <div class="layer top">
    <div class="content-wrap">
      <div class="content-body content-body-top">
        <h2>Lorem Ipsum</h2>
        <p>Blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah</p>
      </div>
      <div class="bg"></div>
    </div>
  </div>

  <div class="handle"></div>
</div>

SCSS:

#wrapper {
    position: relative;
    width: 100%;
    min-height: calc(100vh - 120px);
    overflow: hidden;
    margin-top: 60px;
}

.layer {
    position: absolute;
    width: 100vw;
    min-height: calc(100vh - 110px);
    overflow: hidden;

    .content-wrap {
        position: absolute;
        width: 100vw;
        min-height: calc(100vh - 110px);
    }

    .content-body {
        width: 25%;
        position: absolute;
        top: 50%;
        text-align: center;
        transform: translateY(-50%);
        color: #fff;
        z-index: 1;
    }

    .bg {
        position: absolute;
        width: 100%;
        height: 100%;
        top: 0;
        left: 50%;
        transform: translate(-50%, 0);
        background-color: #191919;
    }

    h1 {
        font-size: 2em;
    }
}

.bottom {
    z-index: 1;

    .content-body {
        right: 5%;
    }
}

.top {
    z-index: 2;
    width: 50vw;

    .content-body {
        left: 5%;
        color: #fff;
    }
}

.test {
    height: 70%;
    width: 50%;
    position: absolute;
    background-color: black;
    right: 5%;
    color: white;
    font-size: 20px;
    z-index: 1;
    top: 10%;

    &.top-image {
        right: 5%;
    }

    &.bottom-image {
        left: 5%;
    }
}

.handle {
    position: absolute;
    height: 100%;
    display: block;
    border-right: 2px solid #fff;
    border-left: 2px solid #fff;
    width: 0px;
    top: 0;
    left: 50%;
    z-index: 3;
}

.skewed {
    .handle {
        top: 50%;
        transform: rotate(30deg) translateY(-50%);
        transform-origin: top;
        height: 200%;
    }

    .top {
        transform: skew(-30deg);
        margin-left: -1000px;
        width: calc(50vw + 1000px);

        .content-wrap {
            transform: skew(30deg);
            margin-left: 1000px;
        }
    }
}

@media (max-width: 800px) {
    #about-heading {
        padding: 70px 20px 0;
        white-space: normal;
        line-height: 1.4;
    }

    #wrapper {
        margin-top: 100px;
    }

    .layer {
        position: static;
    }

    .handle {
        display: none;
    }
}

JS:

window.onresize = e => {
    const wrapper = document.getElementById('wrapper')
    const topLayer = wrapper.querySelector('.top')
    const handle = wrapper.querySelector('.handle')
    let skew = 0
    let delta = 0

    const handleMouseMove = e => {
        delta = (e.clientX - window.innerWidth / 2) * 0.5
        handle.style.left = e.clientX + delta + 'px'
        topLayer.style.width = e.clientX + skew + delta + 'px'
    }

    if (document.documentElement.clientWidth > 800) {

        if (wrapper.className.indexOf('skewed') != -1) {
            skew = 1000
        }

        wrapper.addEventListener('mousemove', handleMouseMove)
    } else {
        wrapper.removeEventListener('mousemove', handleMouseMove)
    }
}

问题是当视口(viewport)大于800px时， slider 效果起作用。但是，当我将窗口调整到小于 800px 时， slider 仍然存在。我的猜测是，出于某种原因，我没有正确删除与包装器元素 Hook 的事件。我有代码的代码笔 here .有人可以帮我解决这个问题吗？

Answer 1

这是因为您在 onresize 中定义了 handleMouseMove，因此每次调用 onresize 时都会创建一个不同的变量，并且您会删除新创建的变量一个不是之前分配的那个。

解决方案是在调整大小之外定义 handleMouseMove 函数。通过这样做，您将添加和删除相同的事件。

你的代码应该是这样的:

  const wrapper = document.getElementById('wrapper')
  const topLayer = wrapper.querySelector('.top')
  const handle = wrapper.querySelector('.handle')
  let skew = 0
  let delta = 0
  const handleMouseMove = e => {
        delta = (e.clientX - window.innerWidth / 2) * 0.5
        handle.style.left = e.clientX + delta + 'px'
        topLayer.style.width = e.clientX + skew + delta + 'px'
    }
  window.onresize = e => {

    if (document.documentElement.clientWidth > 800) {
        console.log('true')

        if (wrapper.className.indexOf('skewed') != -1) {
            skew = 1000
        }

        wrapper.addEventListener('mousemove', handleMouseMove)
    } else {
        console.log('false')
        wrapper.removeEventListener('mousemove', handleMouseMove)
    }
}