Question

在我的页面上 - 在我的CSS中我放了：

*{pointer-events:none;}
.pev{pointer-events:auto}

这是因为我想要一个强大的ui，并且有一些可拖动的东西，我不希望用户不小心选择东西等等。

因此，我正在取消所有点击，徘徊等，并将其重新放回需要触及的内容

我有一个元素（分类.play），它拥有一个youtube播放器（鉴于它的父级是prev class和jquery draggable）。

我想知道绕过.prev和*的最合适的最有效方法，只需通过继承将玩具及其中任何内容的指针事件自动添加（我认为这是正确的）

哪些是更好的语法？

.play*{pointer-events:auto;}
.play < *{pointer-events:auto;}

UPDATE ----------------------------

感谢Pinal，我能够稳定指针事件（如果在拖动指针时光标碰巧干扰视频，视频事件通常会停止拖动事件，例如鼠标移动得更快比拖动的元素然后拖动将发生拖延..结果=== UI看起来坏了。）

所以这是简单的修复（再次感谢man）......

的CSS：

*{outline:none;pointer-events:none;}
.pev{pointer-events:auto!important;}
.play > * {pointer-events:auto;}
.playdrag > * {pointer-events:none!important;}

jquery的：

$(document.body)
    .on('mouseover','.play',function(){
        $('.play').draggable({ containment:'#screensize',scroll:false});
        })
    .on('mousedown','.play',function(){
        $(this).addClass('playdrag');
        })
    .on('mouseup','.play',function(){
        $(this).removeClass('playdrag');
        });

非常酷，让一切都光彩夺目！

Answer 1

您有错误印刷，忘了空格而儿童选择器是>，而不是<：

.play * {pointer-events:auto;}//select all inside
.play > *{pointer-events:auto;}//select children only

最好只使用.play > *进行儿童选择。

什么是“所有孩子”最好的CSS选择器？

1 个答案: