HTML / CSS : div를 클릭에 "보이지 않게"만드시겠습니까?

여러 가지 이유로 <div>일부 텍스트에 (대부분) 투명하게 표시해야 합니다. 그러나 이것은 텍스트를 클릭 할 수 없음을 의미합니다 (예 : 링크를 클릭하거나 선택하기 위해). 이 div를 클릭 및 기타 마우스 이벤트에 대해 "보이지 않게"만드는 것이 가능할까요?

예를 들어 overlaydiv는 텍스트를 덮지 만 overlaydiv를 통해 텍스트를 클릭 / 선택할 수 있기를 원합니다 .

<div id="container">
    <p>Some text</p>
    <div id="overlay" style="position: absolute; top: 0;
                             left: 0; width: 100%; height:100%">
        ... some content ...
    </div>
 </div>

CSS를 사용하여 할 수 있습니다 pointer-events. 이 속성은 Firefox 3.6 이상, Chrome 2 이상, IE 11 이상 및 Safari 4 이상에서 지원됩니다. 불행히도 브라우저 간 해결 방법에 대한 지식이 없습니다.

#overlay {
  pointer-events: none;
}

오버레이를 일시적으로 숨긴 후 이벤트를 다시 실행하면됩니다.

이 질문에 대한 첫 번째 답변보기 : 클릭이 그 뒤에있는 요소로 넘어갈 수있는 HTML "오버레이"

다음과 같이 오버레이를 숨기면됩니다.

overlay.onclick = function(){
    window.event.srcElement.style.visibility = "hidden";
    var BottomElement = document.elementFromPoint((navigator.appName.substring(0,3) == "Net") ? e.clientX : window.event.x,(navigator.appName.substring(0,3) == "Net") ? e.clientY : window.event.y);
    window.event.srcElement.style.visibility = "visible";
    BottomElement.click();
}

이 jQuery 사용

$("div").click(function(e){e.preventDefault();});

"div"를 ID 또는 요소로 바꿉니다.

div의 모든 이벤트 (또는 병아리)를 비활성화하는 대안은 기본적으로 태그가 첨부 된 모든 이벤트를 unbind ()하는 것입니다.

  $('#myDivId').unbind();

또는

  $('#myDivId').unbind("click");