반응형
인사이드 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 요소 위에 위를 추가하면 클릭, 상태 및 커서 옵션이 모두 차단됩니다.
<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;
}
처음 하나의 팝업 디브가 닫힐 때까지 다른 디브 클릭을 비활성화하는 방법
<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
반응형
'programing' 카테고리의 다른 글
우커머스는 이름을 사용하여 상품 속성 ID를 가져옵니다. (0) | 2023.09.23 |
---|---|
워드프레스/우커머스 훅이 불이 붙지 않습니까? (0) | 2023.09.23 |
초기 커밋을 어떻게 참조합니까? (0) | 2023.09.18 |
OR 연산자가 있는 AngularJsng급 다중 조건 (0) | 2023.09.18 |
자바스크립트로 업로드 전 이미지 너비 및 높이 확인 (0) | 2023.09.18 |