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

94

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

이미지를 "클릭 할 수 없음"또는 "비활성"등으로 설정하여 사용자가 해당 이미지를 터치하고 드래그하면 그 뒤에있는 페이지가 마치 이미지가 상호 작용을 "차단"하지 않은 것처럼 계속 스크롤됩니다.

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

감사!

— Hannebaumsaway
소스

186

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

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

— 크리스 브라운
소스

2

완전한! 나는 pointer-events전에 건너 본 적이 없었 습니다. 이것이 바로 제가 찾던 것입니다. 감사합니다!

— hannebaumsaway

1

@Dusty Kinda는 말이됩니다. 마우스 상호 작용을 비활성화하지만 마우스 상호 작용을 원합니다. 특정 사용 사례는 무엇입니까? 포인터가 요소를 클릭 할 수 있음을 의미하기 때문에 직관적이지 않은 UX 관점에서. JSFiddle을 함께 던지면 내가 볼 수 있습니다.

— Chris Brown

@ChrisBrown 커서 변경이 약간 혼란 스러웠습니다. 여기에 내가 jsfiddle.net/cxwvdos0 을 생각 해낸 것 중 약간은 약간 의 미친 짓 인데 , 단지 1 초 동안 버튼을 비활성화하고 커서를 변경하지 않는 것입니다. jQuery unbind와 bind익명 함수를 변환하려면 작동했을 것이라고 생각합니다. 그래도 응답 해 주셔서 감사합니다!

— Dusty

모바일 장치에서는 작동하지 않습니다.

— Hamendra Sunthwal

17

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

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

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

— 테리 직물
소스

1

예를 들어 주셔서 감사합니다!

— hannebaumsaway

한 번 클릭 *하고 코드 예제 (아이콘 클릭)가 FF 68.0에서 작동하지 않습니다.

— Andrew

3

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>

스 니펫 확장

— 후삼에 비쉬
소스