CSS元素隐藏后JS事件响应

PetitQ HTML/CSS 2019-3-09 2.56K 2 0

今天探讨下 CSS 元素隐藏后 JS 事件响应问题，在我们的发布的常见 CSS 五种隐藏元素方式一文中，我们分享了 CSS 隐藏元素的五中常见方法，介绍的也比较详细，这里就不累述了，开门见山直入主题，如果被隐藏的元素绑定了一些事件，我们执行了相关操作后，这些事件是否会被响应并执行呢，看看下面的一段简单的代码：

```
<style>   
```
```
    div {    
```
```
        width: 100px;    
```
```
        height: 100px;    
```
```
        background: red;    
```
```
        margin: 15px;    
```
```
        padding: 10px;    
```
```
        border: 5px solid green;    
```
```
        display: inline-block;    
```
```
        overflow: hidden;    
```
```
    }   
```
```
    .none { display: none; }   
```
```
    .hidden { visibility: hidden; }   
```
```
    .opacity0 { opacity: 0; }   
```
```
    .height0 { height: 0; }     
```
```
</style>
```
```
<div class="none"></div>   
```
```
<div class="hidden"></div>   
```
```
<div class="opacity0"></div>   
```
```
<div class="height0">aa</div>
```

<script src="/Scripts/jquery-1.10.2.min.js"></script>

```
<script>   
```

    $(".none").on("click", function () {

```
        console.log("none clicked");   
```
```
    })   
```

    $(".hidden").on("click", function () {

        console.log("hidden clicked");

```
    })   
```

    $(".opacity0").on("click", function () {

        console.log("opacity0 clicked");

```
    })   
```

    $(".height0").on("click", function () {

        console.log("height0 clicked");

```
    })   
```
```
</script>
```

也想出现在这里？联系我们吧

这段代码将四种 CSS 隐藏元素的方法分别展示出来，并且 JS 绑定其点击事件，经过创客云测试，我们主要有下面的结论：

1、display:none：元素彻底消失，很显然不会触发其点击事件。

2、visibility:hidden：无法触发其点击事件，有一种说法是 display:none 是元素看不见摸不着，而 visibility:hidden 是看不见摸得着，这种说法是不准确的，设置元素的 visibility 后无法触发点击事件，说明这种方法元素也是消失了，只是依然占据着页面空间。

3、opacity:0：可以触发点击事件，原因也很简单，设置元素透明度为 0 后，元素只是相对于人眼不存在而已，对浏览器来说，它还是存在的，所以可以触发点击事件。

4、height:0：将元素的高度设置为 0，并且设置 overflow:hidden。使用这种方法来隐藏元素，是否可以触发事件要根据具体的情况来分析。如果元素设置了 border，padding 等属性不为 0，很显然，页面上还是能看到这个元素的，触发元素的点击事件完全没有问题。如果全部属性都设置为 0，很显然，这个元素相当于消失了，即无法触发点击事件。

但是这些结论真的准确吗？我们在上面的代码中添加这样一句代码：

```
$(".none").click();
```

结果发现，触发了 click 事件，也就是通过 JS 可以触发被设置为 display:none 的元素的事件。所以前面无法触发点击事件的真正原因是鼠标无法真正接触到被设置成隐藏的元素！！！

上面介绍完了 CSS 元素隐藏后 JS 事件响应问题，下面补充下 CSS3 transition 动画对这几种方法的影响，CSS3 提供的 transition 极大地提高了网页动画的编写，但并不是每一种 CSS 属性都可以通过 transition 来进行动画的。我们修改代码如下：

```
<style>   
```
```
    div {    
```
```
        width: 100px;    
```
```
        height: 100px;    
```
```
        background: red;    
```
```
        margin: 15px;    
```
```
        padding: 10px;    
```
```
        border: 5px solid green;    
```
```
        display: inline-block;    
```
```
        overflow: hidden;    
```
```
        transition: all linear 2s;     
```
```
    }   
```
```
</style>     
```
```
 
```
```
<div class="none"></div>   
```
```
<div class="hidden"></div>   
```
```
<div class="opacity0"></div>   
```
```
<div class="height0">aa</div>     
```
```
 
```

<script src="/Scripts/jquery-1.10.2.min.js"></script>

```
<script>   
```
```
$(".none").on("click", function () {   
```
```
    console.log("none clicked");   
```
```
    $(this).css("display", "none");   
```
```
})   
```

$(".hidden").on("click", function () {

```
    console.log("hidden clicked");   
```

    $(this).css("visibility", "hidden");

```
})   
```

$(".opacity0").on("click", function () {

```
    console.log("opacity0 clicked");   
```
```
    $(this).css("opacity", 0);   
```
```
})   
```

$(".height0").on("click", function () {

```
    console.log("height0 clicked");   
```
```
    $(this).css({   
```
```
        "height": 0,   
```
```
    });   
```
```
})   
```
```
</script>
```

经过创客云认真测试，可以得到以下结论：

1、display:none：完全不受 transition 属性的影响，元素立即消失

2、visibility：hidden：元素消失的时间跟 transition 属性设置的时间一样，但是没有动画效果

3、opacity 和 height 等属性能够进行正常的动画效果

假设我们要通过 CSS3 来做一个淡出的动画效果，应该如下：

fadeOut { visibility: visible; opacity: 1; transition: all linear 2s; }

fadeOut:hover { visibility: hidden; opacity: 0; }

应该同时设置元素的 visibility 和 opacity 属性。本文总结说明了“隐藏”元素的几种方式，其中最常用的还是 display:none 和 visibility:hidden。其他的方式只能算是奇技淫巧，并不推荐使用它们来隐藏元素，它们的真正用途应该不在隐藏元素，而是通过了解这些方法的特点，挖掘出其真正的使用场景。

补充技巧

1、设置元素的 position 与 left，top，bottom，right 等，将元素移出至屏幕外

2、设置元素的 position 与 z-index，将 z-index 设置成尽量小的负数

以上就是本文的全部内容，希望本文的内容对大家的学习或者工作能带来一定的帮助，同时也希望多多支持创客云！

CSS 元素隐藏后 JS 事件响应

已有 641 人购买

永久更新：
演示数据：

立即购买

查看演示升级 VIP 立刻购买

Fun发布于： 2019年6月14日上午11:29

登录以回复

2、visibility:hidden：无法触发其点击事件，有一种说法是 display:none 是元素看不见摸不着，而 visibility:hidden 是看不见摸得着，这种说法是不准确的，设置元素的 visibility 后无法触发点击事件，说明这种方法元素也是消失了，只是依然占据着页面空间。

visibility:hidden;元素并没有消失,控制台依然可以打印元素,仍然可以在dom中找到这个对象
- PetitQ发布于： 2019年6月14日下午2:18
  
  登录以回复
  
  感谢您关注本站，有时间我们在测试看下。