イベントを HTML タグの擬似要素にバインドする 3 つの方法

この記事では、イベントを HTML タグの疑似要素にバインドする 3 つの方法を紹介します。これには一定の参考価値があります。必要な友人は参照できます。お役に立てば幸いです。

最近のプロジェクトで、アイコンをクリックして特定の操作を実行する機能に出会いました。本来は非常に簡単に実装できましたが、アイコンは::after 疑似要素によって実装されています。私の印象では、擬似要素を直接DOM操作することはできないようですが、プロジェクト内のすべてのページは擬似要素を介してアイコンを表示しており、すべてのページのアイコンをDOM要素に変更することは現実的ではありません。
ネットで調べると、イベントオブジェクトを通じてマウスポインタの座標を取得し、クリックされた領域が擬似要素が配置されている領域かどうかを判定する方法が紹介されていることが多いのですが、これが非常に面倒です。

以下は、疑似要素をクリックしたときのイベント処理を実装するいくつかの簡単な方法の概要とサンプル コードです。

HTMLの構造

まずHTMLの構造はこんな感じです

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

実装方法

1つ目

CSS3経由達成するポインターイベントの特性。

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: &#39;&#39;;
        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(&#39;section&#39;).addEventListener(&#39;click&#39;, ()=>{
        console.log(&#39;只有点击伪元素才能触发click&#39;);
    });
</script>

2番目のタイプ

イベントバブリングを防ぐことで実現

CSS基本コード 同上、 pointer-events: none; および pointer-events: auto; を変更します。

<script>
    document.querySelector(&#39;section&#39;).addEventListener(&#39;click&#39;, ()=>{
        // 因为其他子元素事件冒泡被阻止了，所以点击section的时候，只剩下伪元素覆盖区域进入到事件监听中
        console.log(&#39;只有伪元素才能触发click&#39;);
    });

    document.querySelector(&#39;span&#39;).addEventListener(&#39;click&#39;, ev=>{
        // 阻止文字元素的事件冒泡
        ev.stopPropagation();
    });
</script>

3 番目の方法

イベント オブジェクトのポインター座標を使用して、クリックが疑似要素の範囲内にあるかどうかを判断します。これを行う方法はインターネット上に多数あります。 Du Niangに行けば見つけることができます。

最後に、うまくいかない場合は、::after を使用せず、実際の dom ノードに置き換えてください。ああ、O(∩_∩)O はは~

この記事はすべてここにあります。以上です。その他のエキサイティングなコンテンツについては、PHP 中国語 Web サイトの HTML ビデオ チュートリアル 列に注目してください。

以上がイベントを HTML タグの擬似要素にバインドする 3 つの方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。