programing

인사이드 div 클릭을 비활성화하는 방법

closeapi 2023. 9. 23. 22:43
반응형

인사이드 div 클릭을 비활성화하는 방법

여러 가지 이유로 a 내의 특정 컨텐츠를 클릭하지 않도록 설정해야 합니다.div요소.예를 들어 클릭 광고 공격으로 인해 발생합니다.그래도 나는 그것이 보이기를 원합니다.

다음의 토막글을 생각해 보십시오:-

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

그 안에서 좌클릭 기능을 비활성화 방법div?

사용할 수 있는 CSS 속성은 다음과 같습니다.

pointer-events:none

!중요 이 속성은 Opera Mini 및 IE 10 이하에서 지원되지 않습니다(포함).이 브라우저들을 위해서는 또 다른 해결책이 필요합니다.

jQuery Method CSS 속성이 아닌 스크립트를 통해 비활성화하려면 다음이 도움이 됩니다.jQuery 버전 1.4.3+를 사용하는 경우:

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

그렇지 않은 경우:

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

(Documentation)을 사용하여 클릭을 다시 활성화할 수 있습니다.

이것은 속성을 재정의하므로 커서가 표준이 아닌 다른 것이 되기를 원한다면 cs는 다음에 배치되어야 합니다. pointer-events.

순수 CSS로 원하는 경우:

pointer-events:none;

시도해 보기:

pointer-events:none

지정된 HTML 요소 위에 위를 추가하면 클릭, 상태 및 커서 옵션이 모두 차단됩니다.

http://jsfiddle.net/4hrpsrnp/

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

CSS를 사용할 수 있습니다.

.ads{pointer-events:none}

또는 javascript를 사용하여 이벤트를 방지합니다.

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

DIV를 클릭한 후 다시 클릭하지 않으려면 다음을 사용할 수 있습니다.

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

예:
HTML

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

자바스크립트

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

처음 하나의 팝업 디브가 닫힐 때까지 다른 디브 클릭을 비활성화하는 방법

Image of the example

 <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>

언급URL : https://stackoverflow.com/questions/28083708/how-to-disable-clicking-inside-div

반응형