2. 程式人生 > >CSS中的pointer-events屬性實現點穿效果

CSS中的pointer-events屬性實現點穿效果

阿新 • • 發佈：2018-12-16

CSS的pointer-events屬性

auto：與 pointer-events 屬性未指定時的表現效果相同。
none：該元素永遠不會成為滑鼠事件的 target。但是，當其後代元素的 pointer-events 屬性指定其他值時，滑鼠事件可以指向後代元素，在這種情況下，滑鼠事件將在捕獲或冒泡階觸發父元素的事件偵聽器。

程式碼例項

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>test css pointer-events</title
 
>
    <style>
        body{
            background: #eeeeee;
        }
        main{
            width: 880px;
            height: 500px;
            margin: 100px auto;
            position: relative;
            background: #FFFFFF;
            display: table;
        }
        .top{
            width
 
: 100px;
            height: 100px;
            position: absolute;
            top: 50%;
            left: 50%;
            transform:translate(-50%,-50%);
            display: table-cell;
            vertical-align: center;
            color: #FFFFFF;
            line-height: 100px;
            background: purple
 
;
            pointer-events: none;
            cursor: pointer;
        }

        .under{
            width: 100px;
            height: 100px;
            position: absolute;
            top: 50%;
            left: 50%;

            text-align:center;
            line-height: 100px;
            color: #FFFFFF;
            border-radius:50%;
            background: orangered;
            cursor: zoom-in;
        }
    </style>
</head>
<body>
    <main>

        <div class="under">
            Under U
        </div>

        <div class="top">
            I am top div
        </div>

    </main>
</body>
<script type="text/javascript">
    let main = document.querySelector("main");
    let log = function (content) {
        let p = document.createElement("p");
        p.innerHTML = content;
        main.appendChild(p);
    };
    let t =document.querySelector(".top");
    t.addEventListener("click",function () {
            log("clicked the top!")
    },true);//捕獲階段
    let under =document.querySelector(".under");
    under.addEventListener("click",function () {
        log("clicked the under!!!")
    },true)//捕獲階段
</script>
</html>

執行結果

這裡寫圖片描述

在具有層級關係的結構中，使用了pointer-events:none 屬性將會使當前元素中的事件不會被捕獲，從而實現了點穿的效果。而當代碼示例中假如top元素具有子元素且顯示指定pointer-events屬性不為none的時候，top元素註冊的事件將會被捕獲/冒泡觸發

參考連結

http://www.hangge.com/blog/cache/detail_1859.html

相關推薦

CSS中的pointer-events屬性實現點穿效果

CSS的pointer-events屬性 auto：與 pointer-events 屬性未指定時的表現效果相同。 none：該元素永遠不會成為滑鼠事件的 target。但是，當其後代元素的 pointer-events 屬性指定其他值時，滑鼠事件可以指向後代元素，在這種情況下，滑

css3中的3d屬性實現一個星空效果

在css3新增屬性的學習中，有關3d的知識，下面是利用transform屬性的3d效果做的一個星空中星球圍繞太陽旋轉，實現了自轉和公轉效果；話不多說，直接code： HTML： <!DOCTYPE html> <html> <head>

關於CSS中的overflow屬性

屬性 pan 用戶 normal style visible 默認值 也會 可見 定義和用法： overflow屬性規定當內容溢出元素框時發生的事情。 這個屬性定義溢出元素內容區的內容會如何處理。如果值為scoll，不論是否需要，用戶代理都會提供一種滾動機制。因此，有可能即

CSS中常用的屬性

沒有 方向 light 之間 pan let -i 附件 circle 字體屬性 Font-family 字體族科 Font-size 字體大小 Font-style 字體樣式 Font-weight 字體加粗 normal |bold(加粗)|lighter(

css中關於居中的那點事兒

效果圖 單元格 meta 得到 部分 邊距 絕對定位 lin ble 　　關於居中，無論是水平居中，還是垂直居中都有很多方式，下面我來介紹一些常用的。 第一部分：水平居中 　　1.實現行內元素的居中。方法：在行內元素外面的塊元素的樣式中添加：text-align:cen

理解與應用css中的display屬性

寫代碼 塊級元素 get tle 換行符 line attr 沒有 100% 　　display屬性是我們在前端開發中常常使用的一個屬性，其中，最常見的有： none block inline inline-block inherit 　　下面，我將按照順序將上述幾種屬

css中background-origin屬性的使用

pre type 背景圖 head -s adding 邊框 ott back background-origin用來規定元素背景圖像的相對定位位置，它有三個屬性值： 1、border-box border-box表示元素背景圖像相對於border區域開始定位。 代碼如下：

pointer-events屬性

none 內部 需要 影響 打開 spa bili inter 作者 根據MDN上的解釋如下： CSS屬性pointer-events允許作者控制特定的圖形元素在何時成為屬性事件的target。當未指定該屬性時，SVG內容表現如同visiblePainted。 除了指定

理解css中的position屬性

理解css中的position 兩種型別的定位 static型別：只有一個值position: static.position預設值 relative型別：包括三個值,這三個值會相互影響，允許你以特定方式移動元素 position: relative position:

CSS中的overflow屬性

導讀：overflow屬性一般用來隱藏超過div範圍的元素，包括不隱藏(visible)，直接隱藏(hidden)，用滾動條隱藏(scroll)，自動(aotu)這四個屬性。當然overflow的用法並不是如此簡單的理解，在很多製作網頁的場合我們都需要用overflow，本文介紹overflow的四

CSS中background系列屬性介紹

在CSS中background充當著背景圖的意義，（在CSS3中會有更多的相關屬性），這邊小編介紹一下background系列屬性中不存在相容性問題的一些屬性。之後再學習了CSS3後會在寫部落格進行對該類的補充。 1.background-color 從語義上看就是新增背景顏色 方法一：

CSS中提升優先順序屬性!important的用法總結

轉載：https://blog.csdn.net/m0_38099607/article/details/72860779 版權宣告：本文為博主原創文章，未經博主允許不得轉載。    https://blog.csdn.net/m0_38099607/article

css中的position屬性值的探究

css的position屬性指定了元素的定位型別，然後通過top，botton，left，right來具體定位。 在具體定位之前必須使用position屬性，否則所有的具體定位屬性都無法生效。 position可選擇的值一共五個：static ，relative，absolute，fixed，或sticky。

CSS中的display屬性

display屬性很有意思這個帶上inline-block可以將原來的塊級元素具有行內元素的特性同時其塊級元素的特性仍然具有。 我們知道<div>是塊級元素總是佈滿一行在這裡我們就讓其具有內聯元素和塊級元素兩種特性方便使用。 display屬性所具有的屬性值 non

Vue中配合clipboard.js實現點選按鈕複製內容到剪下板

需求設定 點選某個按鈕，將設定的目標內容(例如下載連結地址)複製到剪下板，可以在電腦上任何地方貼上 不使用任何框架和使用Flash，以最小的程式碼實現該功能，並能相容所有主流瀏覽器 外掛選擇 clipboard.js: * `NPM方式`：`np

淺談CSS中margin的屬性及使用方法

想修改一下子自己的CSS，因為部落格標題正好把網頁圖片上的文字正好檔了一部分，看起來很不爽。最後確實是由“margin命令”來控制的，於是上網學習了一下子這個的用法。margin在中文中我們翻譯成外邊距或者外補白（本文中引用外邊距）。他是元素盒模型（box model）的基礎

CSS中常用的屬性，彙總，練習出一套試卷，簡單版

CSS常用屬性的介紹？顏色屬性可以通過取色器來取色值例子：<!DOCTYPE html> <html> <head> <meta charset="UTF

CSS中常用七大屬性

1 字型屬性    字型屬性的功能是設定頁面字型的顯示樣式 font-family設定使用的字型 font-style設定字型的樣式，是否斜體 font-variant設定字型的大小寫 font-weight設定字型的粗細 font-size設定字型的大小 2 顏色和

專案中彈出頁面的顯示層次問題 CSS中z-index屬性

z-index最大值: IE FireFox Safari的z-index最大值是2147483647 。 Opera的最大值是2147483584.。 IE Safari Opera在超過其最大值時按最大值處理。 FireFox 在超過最大值時會資料溢位正負不定,但有一點可以肯定絕對不會高於2147

Android中按鈕的水波紋點選效果的實現

關於按鈕水波紋的點選效果，這個是我在http://blog.csdn.net/singwhatiwanna/article/details/42614953這篇文章讀到的。寫得真心不錯，我只是站在巨人的肩上而已。 我加了一些註釋，以至於我們更好的理解這篇不錯的文章 下面是主