Preventdefault()가 적용되는 것을 방지하는 방법

default()가 적용되는 것을 방지하는 방법: 1. 이벤트 프록시를 사용합니다. 이벤트 프록시는 이벤트 버블링을 통해 이벤트 리스너를 상위 요소에 추가한 다음 이벤트 버블링을 사용하여 수정하거나 방지하는 기술입니다. 2. 플래그 변수 동일한 이벤트 핸들러의 조건에 따라 이벤트의 기본 동작을 차단할지 여부를 결정해야 하는 경우 플래그 변수를 사용하여 호출을 제어해야 합니다. PreventDefault() 메소드.

브라우저에서는 이벤트의 기본 동작을 방지하기 위해 PreventDefault() 메서드가 자주 사용됩니다. 예를 들어, 브라우저가 기본 탐색 또는 양식 제출 동작을 수행하도록 하는 대신 링크 클릭 또는 양식 제출 동작을 사용자 정의하려는 경우 이 방법을 사용할 수 있습니다.

그러나 PreventDefault() 메서드가 적용되는 것을 방지하려면 좀 더 복잡한 기술을 사용해야 할 수도 있습니다. 왜냐하면 JavaScript는 PreventDefault()의 동작을 실행 취소하거나 재정의하는 직접적인 메서드를 제공하지 않기 때문입니다.

1. 이벤트 프록시 사용

이벤트 프록시는 이벤트 리스너를 상위 요소에 추가한 다음 이벤트 버블링을 통해 하위 요소에서 이벤트를 트리거하는 기술입니다. 이렇게 하면 이벤트가 발생하는 동안 이벤트의 기본 동작을 수정하거나 방지할 수 있습니다.

다음은 간단한 예입니다.

document.body.addEventListener('click', function(event) {  
  if (event.target.tagName === 'BUTTON' && event.target.textContent === 'Prevent Default') {  
    event.stopPropagation();  // 阻止事件冒泡，从而阻止默认行为  
  }  
});  
  
document.body.innerHTML = '<button>Prevent Default</button><div>Some content</div>';

이 예에서 버튼을 클릭하면 브라우저는 기본 클릭 동작(예: 링크로 이동 또는 양식 제출)을 트리거하려고 시도합니다. 하지만 이벤트가 발생하는 동안 이벤트 전파를 차단했기 때문에 기본 동작이 트리거되지 않았습니다.

그러나 이 메서드는 PreventDefault() 메서드를 호출한 이벤트의 기본 동작을 방지하지 않습니다. PreventDefault() 메서드가 이벤트 핸들러에서 호출되기 때문에 이벤트 핸들러 실행이 완료되면 이벤트가 차단됩니다. 이벤트 핸들러가 실행된 후에는 이 결과를 변경할 수 없습니다.

2.플래그 변수

동일한 이벤트 핸들러의 조건에 따라 이벤트의 기본 동작을 방지할지 여부를 결정해야 하는 경우 플래그 변수를 사용하여 PreventDefault() 호출을 제어해야 할 수도 있습니다. 방법. 예:

var preventDefault = false;  
  
document.body.addEventListener('click', function(event) {  
  if (event.target.tagName === 'BUTTON' && event.target.textContent === 'Prevent Default') {  
    preventDefault = true;  
  } else if (preventDefault) {  
    event.preventDefault();  
  }  
});  
  
document.body.innerHTML = '<button>Prevent Default</button><div>Some content</div>';

이 예에서 버튼을 클릭하면 PreventDefault 변수가 true로 설정됩니다. 그런 다음 이벤트 핸들러는 다른 요소를 처리할 때 PreventDefault 변수의 값을 확인하고 필요에 따라 PreventDefault() 메서드를 호출합니다. 이렇게 하면 동일한 이벤트 핸들러 내의 조건에 따라 이벤트의 기본 동작을 방지할 수 있습니다.

위 내용은 Preventdefault()가 적용되는 것을 방지하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!