요소를 클릭 할 수 없도록 설정 (뒤에있는 요소 클릭)

program story

inputbox 2020. 10. 26. 07:59

사용자가 터치 스크린 (모바일)을 스크롤 할 때 페이지를 오버레이하는 고정 이미지가 있습니다.

사용자가 해당 이미지를 터치하고 끌면 이미지가 상호 작용을 "차단"하지 않은 것처럼 이미지 뒤에있는 페이지가 여전히 스크롤되도록 해당 이미지를 "클릭 할 수 없음"또는 "비활성"으로 만들고 싶습니다.

이것이 가능한가? 필요하다면 내가 의미하는 바를 예시하는 스크린 샷을 제공 할 수 있습니다.

감사!

CSS 설정- pointer-events: none이미지와의 모든 마우스 상호 작용을 제거해야합니다. IE를 제외하고 모두 잘 지원됩니다.

다음pointer-events 은 취할 수 있는 전체 값 목록 입니다 .

CSS 포인터 이벤트는 여러분이보고 싶은 것입니다. 귀하의 경우에는 포인터 이벤트를 "없음"으로 설정하십시오. 이 JSFiddle에서 예제를보십시오 ... http://jsfiddle.net/dppJw/1/

아이콘을 두 번 클릭해도 단락을 클릭 한 것으로 표시됩니다.

div.child {
    ...    
    background: #fff;
    pointer-events: none //This line is the key!
}

JavaScript를 사용하려는 경우 :

document.getElementById("x").style.pointerEvents = "none";

<a href="https://www.google.com" id="x" />Unclickable Google Link</a>
<br>
<a href="https://www.google.com" id="" />Clickable Google Link</a>

inputbox