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

您可以检查clicked元素（事件目标）是否事实上是事件处理程序（this）中引用的元素，并且只有在这种情况下才执行淡化。这将避免点击从子元素传播并触发该功能的问题：

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