Как отключить клик внутри div

По многим причинам мне нужно отключить нажатие на определенный контент в элементе div. Например, из-за нажатия на рекламные атаки. Я все еще хочу, чтобы это было видно.

Рассмотрим следующий фрагмент: -

<div class="ads">
something should be here, i do not want to be clicked
</div>

как отключить способности щелчка левой кнопкой мыши на то, что div?

Ответ 1

Свойство CSS, которое можно использовать:

pointer-events:none

! ВАЖНО Имейте в виду, что это свойство не поддерживается Opera Mini и IE 10 и ниже (включительно). Для этих браузеров необходимо другое решение.

СПОСОБ JQuery Если вы хотите отключить его с помощью скрипта, а не свойства CSS, они могут вам помочь: Если вы используете jQuery версии 1.4. 3+:

$('selector').click(false);

Если нет:

$('selector').click(function(){return false;});

Ссылка от: jquery - отключить клик

Вы можете повторно включить клики с помощью pointer-events: auto; (Документация)

.Обратите внимание, что pointer-events переопределяет свойство cursor, поэтому, если вы хотите, чтобы курсор отличался от стандартного , ваш CSS должен быть на месте после pointer-events.

Ответ 2

Если вы хотите его в чистом CSS:

pointer-events:none;

Ответ 3

Попробуйте следующее:

pointer-events:none

Добавление выше по указанному элементу HTML предотвратит все параметры щелчка, состояния и курсора.

http://jsfiddle.net/4hrpsrnp/

<div class="ads">
 <button id='noclick' onclick='clicked()'>Try</button>
</div>

Ответ 4

Как отключить щелчок по другому элементу div, пока не закроется первый всплывающий элемент div

 <p class="btn1">One</p>
 <div id="box1" class="popup">
 Test Popup Box One
 <span class="close">X</span>
 </div>

 <!-- Two -->
 <p class="btn2">Two</p>
 <div id="box2" class="popup">
 Test Popup Box Two
 <span class="close">X</span>
  </div>

<style>
.disabledbutton {
 pointer-events: none;
 }

.close {
cursor: pointer;
}

</style>
<script>
$(document).ready(function(){
//One
$(".btn1").click(function(){
  $("#box1").css('display','block');
  $(".btn2,.btn3").addClass("disabledbutton");

});
$(".close").click(function(){
  $("#box1").css('display','none');
  $(".btn2,.btn3").removeClass("disabledbutton");
});
</script>

Ответ 5

Если вы используете функцию onclick DIV, а затем хотите отключить ее, нажмите еще раз, вы можете использовать это:

for (var i=0;i<document.getElementsByClassName('ads').length;i++){
    document.getElementsByClassName('ads')[i].onclick = false;
}

Пример:
HTML

<div id='mybutton'>Click Me</div>

Javascript

document.getElementById('mybutton').onclick = function () {
    alert('You clicked');
    this.onclick = false;
}

Ответ 6

Вы можете использовать CSS

.ads{pointer-events:none}

или Использование события предотвращения JavaScript

$("selector").click(function(event){
   event.preventDefault();
});