<menu id="u2y6m"></menu>
<tt id="u2y6m"><rt id="u2y6m"></rt></tt>
  • <input id="u2y6m"></input><tt id="u2y6m"><blockquote id="u2y6m"></blockquote></tt>
    <bdo id="u2y6m"><small id="u2y6m"></small></bdo>
  • <blockquote id="u2y6m"><optgroup id="u2y6m"></optgroup></blockquote>
  • 溫馨提示×

    web前端入門到實戰:幾種HTML標簽偽元素綁定事件的方式

    發布時間:2020-04-18 15:22:05 來源:網絡 閱讀:230 作者:前端向南 欄目:web開發

    下面整理出幾種簡便方式實現 click 偽元素時進行事件處理,附上例子代碼。

    HTML結構

    首先 HTML 結構是這樣的

    
    <section>
        <span>按鈕文字</span>
    </section>
    

    實現方法

    第一種

    通過
    CSS3
    pointer-events 特性來實現。

    CSS 代碼

    <style>
        *{margin: 0; padding:0;}
        section{
            border: 1px solid #abc;
            border-radius: 5px;
            background-color: #def;
            font-family: Microsoft YaHei;
            height: 40px;
            box-sizing: border-box;
            cursor: pointer;
            font-size: 16px;
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
    
            pointer-events: none;    /* 關鍵點在這里,元素禁止響應鼠標事件 */
        }
    
        section::after{
            content: '';
            border-left: 1px solid #abc;
            display: inline-block;
            width: 24px;
            height: 100%;
            background-size: contain;
            background-position: center;
            background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADAAAAAwCAYAAABXAvmHAAABEklEQVRoQ+2X3Q3CMAyE3Y3YBDZAbOBRzAaMwkiMgCqlUoX4SX13qiKcl77Uzn13ddpONviaBtdvBbB3gpVAJQA6UI8QaCBcXgnAFoINKgHQQLhcmoC738zsHhHzVbJkAE38uam+qCAkAC/iF+clEHSAD+JlEFSAH+IlEDSATvF0CArARvFUCBggKZ4GAQG4+8HMTuABHxHxyPaAALKbMusKgOlmptd/J9CG+JhxblVz3XWIhz5GFxeTEJSPO9oMbISgiJ8NpAHMzTohaOLpAB0QVPESgC8QdPEygDcQEvFSgBXEmD/14Mutu5x6CnXvSryxAIhmplpVAinbiEWVANHMVKtKIGUbsagSIJqZajV8Ak/MSlox+m54VQAAAABJRU5ErkJggg==);
    
            pointer-events: auto;    /* 關鍵點在這里,偽元素覆蓋父元素的 pointer-events: none ,響應鼠標事件 */
        }
    
        section span{
            display: inline-block;
            height: 100%;
            vertical-align: top;
            line-height: 40px;
            padding-left: 10px;
        }
    </style>
    

    JavaScript 代碼

    <script>
        document.querySelector('section').addEventListener('click', ()=>{
            console.log('只有點擊偽元素才能觸發click');
        });
    </script>
    web前端開發學習Q-q-u-n: 784783012 ,分享學習的方法和需要注意的小細節,不停更新最新的教程和學習方法
    (從零基礎開始到前端項目實戰教程,學習工具,職業規劃)

    第二種

    通過阻止事件冒泡的方式實現

    CSS基礎代碼同上,將 pointer-events: none;pointer-events: auto; 。

    <script>
        document.querySelector('section').addEventListener('click', ()=>{
            // 因為其他子元素事件冒泡被阻止了,所以點擊section的時候,只剩下偽元素覆蓋區域進入到事件監聽中
            console.log('只有偽元素才能觸發click');
        });
    
        document.querySelector('span').addEventListener('click', ev=>{
            // 阻止文字元素的事件冒泡
            ev.stopPropagation();
        });
    </script>
    

    第三種

    通過
    event 對象的指針坐標來判斷點擊的是否在偽元素范圍內,這種方式網上很多,大家去度娘一下就有了。

    最后

    最后就是,實在不行就不要使用 ::after 了,換成實際 dom 節點吧

    免責聲明:本站發布的內容(圖片、視頻和文字)以原創、轉載和分享為主,文章觀點不代表本網站立場,如果涉及侵權請聯系站長郵箱:is@yisu.com進行舉報,并提供相關證據,一經查實,將立刻刪除涉嫌侵權內容。

    免費撥打  400 100 2938 免費撥打 400 100 2938
    24小時售后技術支持 24小時售后技術支持
    返回頂部 返回頂部
    <menu id="u2y6m"></menu>
    <tt id="u2y6m"><rt id="u2y6m"></rt></tt>
  • <input id="u2y6m"></input><tt id="u2y6m"><blockquote id="u2y6m"></blockquote></tt>
    <bdo id="u2y6m"><small id="u2y6m"></small></bdo>
  • <blockquote id="u2y6m"><optgroup id="u2y6m"></optgroup></blockquote>
  • 一本久道久久综合丁香五月_免费视频禁止18以下禁止观看_日本japanese熟睡人妻_成熟闷骚女邻居引诱2