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

2

Это можно сделать, повторно запустив событие после того, как вы временно скроете оверлей.

См. Первый ответ на этот вопрос: HTML "оверлей", который позволяет кликам переходить к элементам за ним.

— Йери Себрехтс
источник

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