实现点击任意地方隐藏窗口

Question

为什么无效？哪里错了

<style>
html, body {
    height: 100%;
    margin: 0;
    padding: 0;
}
.test{
    position: fixed;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    opacity: 0;
    visibility: hidden;
}
.test.is-visible {
    opacity: 1;
    visibility: visible;
    -webkit-transition: opacity 0.3s 0s, visibility 0s 0s;
    -moz-transition: opacity 0.3s 0s, visibility 0s 0s;
    transition: opacity 0.3s 0s, visibility 0s 0s;
}
</style>

<div class="test is-visible"> </div>

<script>
//点击任意地方隐藏窗口
$('.test').on('click', function(event){
if( $(event.target).is('.test') ) {
$(this).removeClass('is-visible');
}
});
</script>

Answer 1

你没有引用jQuery 或者jQuery版本问题，换个版本的jQuery试试。

Answer 2

说几点。

1. 需求说不清楚。哪个是“窗口”？别跟我说是.test，有宽高撑满（100%）的窗口么？需求是点击“任意地方”，事件却挂在了.test上，那么这个.test到底是“窗口”还是“点击代理层”呢？
2. 事件是挂在.test上的，然后再做遍判断，看看event.target是不是.test？
3. 为什么同时用opacity和visibility？
4. transition需要写在本体上，然后一般通过添加类的方式，变更属性，然后transition就会生效了；这个跟动画的驱动方式基本是反着的。
5. 默认延迟就是0，不需要写。缩写属性，写的越多就越容易错。