jquery - Video-JS 防止点击事件传播到子元素

Question

我用 Video-JS 插件创建了一个简单的视频页面。视频在弹出模块中播放。我要做的是在单击视频包装器而不是视频时关闭此弹出窗口。但我没有这样做，即使我点击视频控件，弹出窗口也会关闭。我的代码如下所示：

$('.popup-video').click(function() {
    $(this).fadeOut(500);
    // Pause Video
});
$('.popup-video>div').click(function(e) {
    e.stopPropagation();
});
$('.popup-video>video').click(function(e) {
    e.stopPropagation();
});

.stopPropagation以前的方法可以解决问题，但现在不行！我究竟做错了什么？

Answer 1

您可以只检查单击的元素（事件目标）是否实际上是事件处理程序（this）中引用的元素，如果是，则仅进行淡入淡出。这将避免从子元素传播点击和触发函数的问题：

$('.popup-video').click(function(e) {
    if (e.target === this) $(this).fadeOut(500);
});