用戶調整窗口大小時的RemoveEventListener

Question

我按照教程創建滑桿效果。 問題在於，在較小的屏幕上效果不佳。 我可以通過媒體查詢輕松處理樣式，問題是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)
    }
}

問題是，當視口大於800px時，滑塊效果起作用。 但是，當我將窗口的大小調整為小於800px時，滑塊仍然存在。 我的猜測是由於某種原因，我沒有正確刪除掛鈎到wrapper元素的事件。 我在這里有代碼的密碼。 有人可以幫我解決這個問題嗎？

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)
    }
}