HTML / CSS: зробити div "невидимим" для кліків?

98

З різних причин мені потрібно розмістити (переважно) прозорий <div>текст. Однак це означає, що на тексті не можна клацати (наприклад, клацати посиланнями або виділяти його). Чи можна було б просто зробити цей div "невидимим" для клацань та інших подій миші?

Наприклад, overlayобкладинка div охоплює текст, але я хотів би мати можливість клацнути / виділити текст за допомогою 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

Там поліфіл

— rink.attendant. 6

Найпростіша і найпростіша відповідь уперед!

— Jones G

2

Це можна зробити, відновлюючи подію після тимчасового приховування накладеного зображення.

Див. Першу відповідь на це запитання: HTML "накладення", що дозволяє клікам потрапляти до елементів за ним

— Joeri Sebrechts
джерело

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