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

Posted 2023-02-24

【中文标题】即使指针事件设置为无，也使元素可点击

【英文标题】：Make elements clickable even if pointer-events is set to none

【发布时间】：2018-09-21 19:28:51

【问题描述】：

我正在开发一个标签滑块，它几乎完成了。但是，我遇到了一个使元素无法点击的问题。

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

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

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>

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

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

【问题讨论】：

您是否尝试过 .btnsample pointer-events: auto; ... 这将起作用，因为即使父母有 none，也可以在孩子身上设置 pointer-events

@LGSon 道歉，我输入了错误的小提琴。上面的更新了。我试过 .tab-icon pointer-events: auto; ，它有效。但是，如果您将鼠标悬停在按钮上，滑块会抖动。

【参考方案1】：

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

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

【讨论】：

@LGSon 是的，我必须在 MDN 上查找。无法记住所有值。

抱歉，我输入了错误的小提琴。上面的更新了。我试过 .content>.o-visible button pointer-events: auto; ，它有效。但是，如果您将鼠标悬停在按钮上，滑块会抖动

@KimLianLopez 在我的脑海中我也会将鼠标悬停事件添加到按钮中。这应该允许您保持每个选项卡的宽度，并且仍然允许点击。