event.preventDefault()(jQuery 사용)를 호출하는 수신기의 바인딩을 해제하는 방법은 무엇입니까?
jquery 토글 호출은 기본적으로 Default()를 방지하므로 기본값이 작동하지 않습니다.확인란을 클릭할 수 없습니다. 링크 등을 클릭할 수 없습니다.
기본 핸들러를 복원할 수 있습니까?
내 경우:
$('#some_link').click(function(event){
event.preventDefault();
});
$('#some_link').unbind('click');
기본 작업을 복원하는 유일한 방법으로 작동했습니다.
여기에서 볼 수 있는 것처럼: https://stackoverflow.com/a/1673570/211514
그것은 꽤 간단합니다.
당신이 다음과 같은 일을 한다고 가정해 봅시다.
document.ontouchmove = function(e){ e.preventDefault(); }
지금 그것을 원상태로 되돌리려면 다음과 같이 하십시오...
document.ontouchmove = function(e){ return true; }
이 웹 사이트에서.
를 할 수 .preventDefault()
하지만 당신이 할 수 있는 것은 그것을 속이는 것입니다 :)
<div id="t1">Toggle</div>
<script type="javascript">
$('#t1').click(function (e){
if($(this).hasClass('prevented')){
e.preventDefault();
$(this).removeClass('prevented');
}else{
$(this).addClass('prevented');
}
});
</script>
한 단계 더 나아가려면 트리거 버튼을 사용하여 이벤트를 트리거할 수도 있습니다.
function DoPrevent(e) {
e.preventDefault();
e.stopPropagation();
}
// Bind:
$(element).on('click', DoPrevent);
// UnBind:
$(element).off('click', DoPrevent);
경우에 따라* 당신은 처음에 할 수 있습니다.return false
에 e.preventDefault()
을 음으로기복원경우는려하로 할 때return true
.
이 부글부글 을 개의치 않고 하지 않을 때를 합니다.e.stopPropagation()
과 e.preventDefault()
또는 확인란의 경우 다음과 같은 기능을 사용할 수 있습니다.
$(element).toggle(function(){
$(":checkbox").attr('disabled', true);
},
function(){
$(":checkbox").removeAttr('disabled');
})
다음을 수행하여 기본 작업(HREF 추종인 경우)을 복원할 수 있습니다.
window.location = $(this).attr('href');
링크인 경우 링크 클릭을 다시 활성화하면 기본 동작이 복원됩니다.
이것이 어떻게 작동하는지 보여주기 위해 데모 JS 피들을 만들었습니다.
JS 피들의 코드는 다음과 같습니다.
HTML:
<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
<a href="http://jquery.com">Default click action is prevented, only on the third click it would be enabled</a>
<div id="log"></div>
Javascript:
<script>
var counter = 1;
$(document).ready(function(){
$( "a" ).click(function( event ) {
event.preventDefault();
$( "<div>" )
.append( "default " + event.type + " prevented "+counter )
.appendTo( "#log" );
if(counter == 2)
{
$( "<div>" )
.append( "now enable click" )
.appendTo( "#log" );
$(this).unbind("click");//-----this code unbinds the e.preventDefault() and restores the link clicking behavior
}
else
{
$( "<div>" )
.append( "still disabled" )
.appendTo( "#log" );
}
counter++;
});
});
</script>
이 코드를 테스트하면 문제를 해결할 수 있습니다.
event.stopPropagation();
네임스페이스를 사용하는 것이 가장 좋습니다.그것은 안전하고 안전한 방법입니다.여기서 .rb는 바인딩 해제 기능이 특정 키다운에서는 작동하지만 다른 키다운에서는 작동하지 않도록 하는 네임스페이스입니다.
$(document).bind('keydown.rb','Ctrl+r',function(e){
e.stopImmediatePropagation();
return false;
});
$(document).unbind('keydown.rb');
ref1: http://idodev.co.uk/2014/01/safely-binding-to-events-using-namespaces-in-jquery/
ref2: http://jqfundamentals.com/chapter/events
요소에 핸들러가 하나만 있는 경우 jQuery unbind를 사용합니다.
$("#element").unbind();
사용 안 함:
document.ontouchstart = function(e){ e.preventDefault(); }
사용:
document.ontouchstart = function(e){ return true; }
이벤트 인터페이스의 preventDefault() 메서드는 이벤트가 명시적으로 처리되지 않으면 일반적으로 수행되는 기본 작업이 수행되지 않아야 함을 사용자 에이전트에게 알립니다.이벤트 수신기 중 하나가 stopPropagation() 또는 stopImediatePropagation()을 호출하여 한 번에 전파를 종료하지 않는 한 이벤트는 정상적으로 계속 전파됩니다.
이벤트 흐름의 모든 단계에서 preventDefault()를 호출하면 이벤트가 취소됩니다. 즉, 이벤트의 결과로 구현에 의해 일반적으로 수행되는 기본 작업이 발생하지 않습니다.
Event.cancelable을 사용하여 이벤트가 취소 가능한지 확인할 수 있습니다.취소할 수 없는 이벤트에 대해 preventDefault()를 호출해도 효과가 없습니다.
window.onKeydown = event => {
/*
if the control button is pressed, the event.ctrKey
will be the value [true]
*/
if (event.ctrKey && event.keyCode == 83) {
event.preventDefault();
// you function in here.
}
}
일부 사용자 지정 작업(양식에서 비활성화된 입력 필드 사용)이 완료된 후에만 기본 작업이 필요한 문제가 발생했습니다.기본 동작(submit()을 자체 재귀 함수(dosubmit())로 감쌌습니다.
var prevdef=true;
var dosubmit=function(){
if(prevdef==true){
//here we can do something else first//
prevdef=false;
dosubmit();
}
else{
$(this).submit();//which was the default action
}
};
$('input#somebutton').click(function(){dosubmit()});
부울 사용:
let prevent_touch = true;
document.documentElement.addEventListener('touchmove', touchMove, false);
function touchMove(event) {
if (prevent_touch) event.preventDefault();
}
저는 이것을 Progressive Web App에서 사용하여 일부 '페이지'에서는 스크롤/확대를 방지하고 다른 페이지에서는 허용합니다.
2개의 클래스를 구성하도록 설정할 수 있습니다.JS 스크립트 중 하나를 설정한 후 스크립트를 비활성화하려면 이 양식에서 바인딩된 스크립트가 있는 클래스를 삭제하면 됩니다.
HTML:
<form class="form-create-container form-create"> </form>
제이에스
$(document).on('submit', '.form-create', function(){
..... ..... .....
$('.form-create-container').removeClass('form-create').submit();
});
자바스크립트에서 당신은 간단히 이것을 좋아할 수 있습니다.
const form = document.getElementById('form');
form.addEventListener('submit', function(event){
event.preventDefault();
const fromdate = document.getElementById('fromdate').value;
const todate = document.getElementById('todate').value;
if(Number(fromdate) >= Number(todate)) {
alert('Invalid Date. please check and try again!');
}else{
event.currentTarget.submit();
}
});
기본 작업을 복원하는 유일한 방법으로 작동했습니다.
$('#some_link'). 바인딩 해제:
이렇게 하면 됩니다.
$('#myform').on('submit',function(e){
if($(".field").val()==''){
e.preventDefault();
}
});
$('#my_elementtt').click(function(event){
trigger('click');
});
당신이 무슨 말을 하는지 잘 모르겠습니다. 하지만 여기 유사한 (아마도 동일한) 문제에 대한 해결책이 있습니다.
나는 종종 기본값 방지()를 사용하여 항목을 가로채곤 합니다.하지만, 가로채기의 유일한 방법은 아닙니다.종종 당신은 이전과 같이 계속되거나 중단되는 행동을 따라가는 "질문"을 원할 수 있습니다.최근 사례에서 다음 솔루션을 사용했습니다.
$("#content").on('click', '#replace', (function(event){ return confirm('Are you sure you want to do that?') }));
기본적으로 "기본값 방지"는 가로채서 다른 작업을 수행하기 위한 것입니다. "확인"은 ...에서 사용하도록 설계되었습니다. 잘 확인했습니다!
언급URL : https://stackoverflow.com/questions/1551389/how-to-unbind-a-listener-that-is-calling-event-preventdefault-using-jquery
'programing' 카테고리의 다른 글
Iframe 없이 외부 페이지를 포함하시겠습니까? (0) | 2023.08.17 |
---|---|
jquery를 사용하여 드롭다운에서 첫 번째 요소를 선택하는 방법은 무엇입니까? (0) | 2023.08.17 |
Y축이 정수만 사용하도록 강제하는 방법 (0) | 2023.08.17 |
MySQL에서 Forward Engineering을 시도하는 동안 오류 1064가 발생했습니다. (0) | 2023.08.17 |
PHP의 추상 상수 - 자식 클래스가 상수를 정의하도록 강제합니다. (0) | 2023.08.17 |