javascript - 即使指针事件设置为无，也使元素可点击

Question

我正在开发一个选项卡 slider ，它即将完成。但是，我遇到了一个使元素无法点击的问题。

目前，我有一个 div，其类名 content 包含 slider 的所有内容。它位于 slider div 上方。

因为内容在 slider div 之上，所以我决定将 pointer-events 设置为 none 以允许 slider 工作。

var slider = $('.slider');
var tabone = $('.tabone');
var tabtwo = $('.tabtwo');
var overlayOne = $('.tabone .overlay');
var overlayTwo = $('.tabtwo .overlay');
var contentOne = $('.content-one');
var contentTwo = $('.content-two');

$('.btnsample').click(function() {
    alert('ok');
});

slider.on('mouseover', function () {
    if (slider.width() == 250) {
      slider.width(800);    
      contentOne.toggleClass('o-hidden o-visible');
      contentTwo.toggleClass('o-visible o-hidden');

      overlayTwo.toggleClass('off on');
      overlayOne.toggleClass('on off');
    }  
});

tabone.on('mouseover', function () {
    if (slider.width() == 800) {
        slider.width(250);
        contentOne.toggleClass('o-visible o-hidden');
        contentTwo.toggleClass('o-hidden o-visible');

        overlayTwo.toggleClass('on off');
        overlayOne.toggleClass('off on');
    }  
});

$('.tab-btn').click(function() {
    alert('clickable');
});

.wrapper {
    max-width: 960px;
    width: 100%;
    max-height: 410px;
    height: 410px;
    position: relative;
    display: flex;
}

.tab {
    width: 960px;
    height: 410px;
}

.tab .overlay {
    transition: opacity 1s ease-in-out;
}

.tabone {
    position: absolute;
    background: url('https://images.unsplash.com/photo-1508270355006-9e3484a234c7?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=ab353574fe9402b9f3c4cf82053c36ad&auto=format&fit=crop&w=1993&q=80');
    background-size: cover;
}

.slider {
    width: 800px;
    overflow: hidden;
    display: inline-block;
    transition: width 1s ease-in-out;
}

.forward-diagonal {
    transform: skewX(-20deg);
}
.forward-diagonal-inner {
    transform: skewX(20deg);
}

.backward-diagonal {
    transform: skewX(20deg);
}
.backward-diagonal-inner {
    transform: skewX(-20deg);
}

.tabtwo {

    justify-content: flex-end;
     margin-left: 76px; 
    background: url('https://images.unsplash.com/photo-1533176888412-f49e08b436a6?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=5ba2943090f74337a3fb0c49c1d804e3&auto=format&fit=crop&w=1050&q=80');
    background-size: cover;
}

.slider {
    margin-left: -76px;
}


.content {
    position: absolute;
    bottom: 0;
    right: 0;
    top: 0;
    left: 0;
    display: flex;
    pointer-events: none;
}

.content p {
    color: #ffffff;
    font-size: 24px;
}

.content-one {
    width: 800px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    pointer-events: none;
    transition: all 1s ease-in-out;
}

.content-two {
    width: 800px;
    display: none;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    pointer-events: none;
    transition: all 1s ease-in-out;
}

.o-visible {
    opacity: 1;
}

.o-hidden {
    opacity: 0;
}
.overlay {
    background-color: blue;
    display:block;
    width:100%;
    height:100%;
}

.on {
    opacity:.5;
}
.off {
    opacity:0;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script><div class="wrapper">
    <div class="tab tabone">
        <div class="overlay off">
        </div>
    </div>
    <div class="slider forward-diagonal">
        <div class="tab tabtwo forward-diagonal-inner">
            <div class="overlay on">
            </div>
        </div>
    </div>
    <div class="content">
        <div class="content-one o-visible">
            <p>Sample Text</p>
            <button class="btnsample">click</button>
        </div>
        <div class="content-two o-hidden">
            <p>Sample Text</p>
            <button class="btnsample">click</button>
        </div>
    </div>
</div>

有什么方法可以使元素可点击而不破坏 slider 的功能？

这是我的完整代码:https://jsfiddle.net/gyLoczb5/18/

Answer 1

您可以在按钮上显式设置pointer-events。

.content>.o-visible button {
  pointer-events: auto;
}