HTML / CSS: сделать div «невидимым» для кликов?

98

По разным причинам мне нужно поставить (в основном) прозрачный <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>
html css events Дэвид Волевер
источник
1
Краткий ответ: нет. (Обсуждалось несколько раз, но для этого трудно найти дураков, не могу придумать хороших ключевых слов ...) Для чего вам нужен прозрачный DIV?
Pekka
2
Я не думаю, что это возможно. Может быть, вы расскажете о «разных причинах», т.е. о том, чего вы действительно хотите достичь?
davehauser
1
@Null Я бы отказался от -1, пока не станет ясно, что хочет сделать OP.
Pekka
1
NullUserException - Как то, что он предлагает, остановит людей от копирования контента с его веб-сайта? Во всяком случае, он пытается сделать наоборот - он хочет избежать эффекта своего прозрачного div (затрудняющего щелчок и выделение текста).
Hammerite
@Hammer Вы правы. Я снял голос против.
NullUserException

Ответы:

159

Это можно сделать с помощью CSS pointer-events. Это свойство поддерживается в Firefox 3.6+, Chrome 2+, IE 11+ и Safari 4+. К сожалению, у меня нет знаний о кроссбраузерном обходном пути.

#overlay {
  pointer-events: none;
}
Ионуй Г. Стан
источник
3
Ах, выглядит хорошо! Единственная проблема в том, что мне нужно заставить некоторых детей принимать события указателя… Но, может быть, я смогу это понять. Спасибо!
Дэвид Уолевер
2
Круто: pointer-events: visibleпохоже, он сделает именно то , что я хочу. Спасибо!
Дэвид Волевер
Работает в хроме! Люблю, что это возможно!
BT
Есть указатель событий polyfill: github.com/kmewhort/pointer_events_polyfill
rink.attendant.6
Самый простой и прямой ответ!
Jones G
0

Вы можете сделать это, скрыв наложение следующим образом:

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();
}
Дональд Дак
источник
0

Используйте этот jQuery

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

замените "div" на идентификатор или элемент

Дин Ван Гройнен
источник
-1

Альтернативой для отключения всех событий (или цыпленка) в div является unbind () все события, которые по умолчанию прикреплены с тегами 

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

или

  $('#myDivId').unbind("click");
Мухаммад Насир
источник
jqueryтеперь используется off()в пользу unbind()и удаляет только обработчики, не мешает div захватывать щелчок.
pmoleri