이벤트를 HTML 태그 의사 요소에 바인딩하는 세 가지 방법

이 기사는 HTML 태그 의사 요소에 이벤트를 바인딩하는 세 가지 방법을 제공합니다. 이는 특정 참조 값을 가지고 있으므로 도움이 될 수 있습니다.

최근 프로젝트에서 아이콘을 클릭하여 특정 작업을 수행하는 기능을 접했습니다. 원래는 구현이 매우 간단했지만 아이콘은 ::after 의사 요소로 구현되었습니다. , 의사 요소를 직접 사용할 수는 없는 것으로 보입니다. 요소는 DOM 작업을 수행하지만 프로젝트의 모든 페이지는 의사 요소를 통해 아이콘을 표시하는 것이 불가능합니다.
인터넷에 찾아보니 대부분 클릭된 영역이 의사 요소가 위치한 영역인지 판단하기 위해 이벤트 객체를 통해 마우스 포인터 좌표를 구하는 방법을 소개하고 있는데, 이게 굉장히 번거롭습니다.

다음은 예제 코드와 함께 의사 요소를 클릭할 때 이벤트 처리를 구현하는 몇 가지 간단한 방법입니다.

HTML 구조

우선 HTML 구조는 이렇습니다

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

구현 방법

첫 번째 유형# 🎜🎜#

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>

두 번째 유형

이벤트 버블링을 방지하여 달성됩니다# 🎜🎜 #

기본 CSS 코드는 포인터 이벤트: 없음 및 포인터 이벤트: 자동을 제외하고 위와 동일합니다.

<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>

세 번째 방법

이벤트 개체의 포인터 좌표를 사용하여 클릭이 의사 요소 범위 내에 있는지 확인합니다. 이를 온라인으로 수행하는 방법은 여러 가지가 있습니다. .두니앙으로 가시면 찾으실 수 있습니다.

마지막으로 안되면 ::after 쓰지 말고 실제 dom 노드로 교체하세요 아오(∩_∩)O 하하~

이 기사는 여기서 끝납니다. 더 많은 흥미로운 콘텐츠를 보려면 PHP 중국어 웹사이트의

HTML 비디오 튜토리얼

컬럼을 주목하세요!

위 내용은 이벤트를 HTML 태그 의사 요소에 바인딩하는 세 가지 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!