[CSS] 요소들을 겹쳐놓은 상태에서 뒤에 있는 요소 이벤트 처리 (pointer-events)

다음과 같이 요소들을 겹쳐놓았을 때, 앞에 있는 요소만 이벤트가 정상적으로 동작하고 뒤에 있는 요소의 모든 이벤트(스크롤 이동, 버튼 클릭, 텍스트 드래그 및 선택 등)가 작동하지 않는 것을 확인할 수 있다.

• 앞 요소: 양옆 방향 버튼을 가진 요소
• 뒤 요소: 스크롤이 가능하며 텍스트, 버튼을 가진 요소

<style>

    .test-container {
        position: relative;
        width: 500px;
        height: 300px;
        background-color: lightblue;
    }

    .test-scroll-box {
        position: relative;
        width: 100%;
        height: 100%;
        overflow-x: scroll;
        overflow-y: hidden;
        display: flex;
        align-items: center;
        gap: 20px;
    }

    .test-scroll-box .item {
        flex: 0 0 200px;
        height: 200px;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        background-color: white;
    }

    .test-overlay-box {
        position: absolute;
        display: flex;
        top: 0;
        left: 0;
        width: 500px;
        height: 100%;
        justify-content: space-between;
    }

    .test-overlay-box .test-btn {
        width: 30px;
        height: 100%;
        background-color: purple;
        color: white;
        display: flex;
        justify-content: center;
        align-items: center;
        border: none;
    }

</style>

<div class="test-container">
    <div class="test-scroll-box">
        <div class="item">
            <p>item1</p>
            <button onclick="alert('click btn1')">btn1</button>
        </div>
        <div class="item">
            <p>item2</p>
            <button onclick="alert('click btn2')">btn2</button>
        </div>
        <div class="item">
            <p>item3</p>
            <button onclick="alert('click btn3')">btn3</button>
        </div>
        <div class="item">
            <p>item4</p>
            <button onclick="alert('click btn4')">btn4</button>
        </div>
        <div class="item">
            <p>item5</p>
            <button onclick="alert('click btn5')">btn5</button>
        </div>
    </div>
    <div class="test-overlay-box">
        <button onclick="alert('click left btn')" class="test-btn test-left-btn"><</button>
        <button onclick="alert('click right btn')" class="test-btn test-right-btn">></button>
    </div>
</div>

 

 

 

이 경우 'pointer-events' 속성을 활용하여 뒤의 이벤트를 처리할 수 있다.

 

pointer-events

• 해당 요소의 포인터(마우스) 이벤트 (scroll, hover, click, drag ...) 활성화 여부 결정
• 설정값
  • auto: pointer-events 적용하지 않음
  • none:
    - 해당 요소 포인터 이벤트 비활성화
    - 자식 요소에 'pointer-events: auto;' 설정을 통해 해당 자식 요소만 포인터 이벤트 활성화 가능
  • 나머지는 svg에 관한 설정들 (참고)

 

 

다음과 같이 설정하여 뒤에 있는 요소의 포인터 이벤트 뿐만아니라 앞에 있는 요소의 버튼의 이벤트도 활성화 시킬 수 있다.

<style>

    .test-container {
        position: relative;
        width: 500px;
        height: 300px;
        background-color: lightblue;
    }

    .test-scroll-box {
        position: relative;
        width: 100%;
        height: 100%;
        overflow-x: scroll;
        overflow-y: hidden;
        display: flex;
        align-items: center;
        gap: 20px;
    }

    .test-scroll-box .item {
        flex: 0 0 200px;
        height: 200px;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        background-color: white;
    }

    .test-overlay-box {
        position: absolute;
        display: flex;
        top: 0;
        left: 0;
        width: 500px;
        height: 100%;
        justify-content: space-between;
        pointer-events: none; /* here */
    }

    .test-overlay-box .test-btn {
        width: 30px;
        height: 100%;
        background-color: purple;
        color: white;
        display: flex;
        justify-content: center;
        align-items: center;
        border: none;
        pointer-events: auto; /* here */
    }

</style>

<div class="test-container">
    <div class="test-scroll-box">
        <div class="item">
            <p>item1</p>
            <button onclick="alert('click btn1')">btn1</button>
        </div>
        <div class="item">
            <p>item2</p>
            <button onclick="alert('click btn2')">btn2</button>
        </div>
        <div class="item">
            <p>item3</p>
            <button onclick="alert('click btn3')">btn3</button>
        </div>
        <div class="item">
            <p>item4</p>
            <button onclick="alert('click btn4')">btn4</button>
        </div>
        <div class="item">
            <p>item5</p>
            <button onclick="alert('click btn5')">btn5</button>
        </div>
    </div>
    <div class="test-overlay-box">
        <button onclick="alert('click left btn')" class="test-btn test-left-btn"><</button>
        <button onclick="alert('click right btn')" class="test-btn test-right-btn">></button>
    </div>
</div>

뒤 요소 이벤트 테스트 (스크롤, 텍스트 선택, 버튼 클릭)

앞 요소 이벤트 테스트 (버튼 클릭)