웹 프론트엔드 JS 튜토리얼 false 반환, event_javascript 기술의 기본 동작을 차단하기 위한 일부 테스트 코드

false 반환, event_javascript 기술의 기본 동작을 차단하기 위한 일부 테스트 코드

May 16, 2016 pm 06:16 PM
false return

먼저 <textarea id="test"></textarea>
다음 이벤트를 여기에 바인딩합니다

코드 복사 코드는 다음과 같습니다.

test.onkeydown = function(){
return false
}

test.onkeyup = function (){
return false;
}

test.onkeypress = function(){
return false
}

두 가지를 주석 처리합니다. 각각의 이벤트 중 각 테스트는 하나의 이벤트만 바인딩합니다.
분명히 각 함수는 false를 반환합니다. 반환 값이 이벤트의 기본 동작을 방해할 수 있으면 텍스트 상자에 아무 것도 입력할 수 없습니다.
아래 테스트 결과를 보시면서 빨간색 부분을 주목해 주세요.
마지막으로 이벤트를 두 번 바인딩하고 매번 false를 반환하여 기본 작업을 방지할 수 있는지 확인했습니다.
저는 onclick이 false를 반환하고 점프하는지 테스트하기 위해 여전히 a 태그를 사용합니다.
侦听事件返回 false 是否阻止事件默认动作
  chrome IE-8 firfox oper Safari
onkeydown yes yes yes no yes
onkeyup no no no no no
onkeypress yes yes yes yes yes
onclick yes yes yes yes yes
keydown * 2 no 取最后的FN结果 no no no
keypress * 2 no 取最后的FN结果 no no no
click * 2 no 取最后的FN结果 no no no
e.preventDefault(); yes no yes yes(keydown:no) yes
e.returnValue = false no yes no no no

물론 브라우저마다 성능이 다르다고 볼 수 있는데, 가장 문제가 되는 것은 IE입니다.
가장 놀라운 점은 oper의 바인딩이 false를 반환하지만 기본 동작을 막을 수는 없다는 것입니다.
그래서 앞으로는 브라우저의 기본 동작을 방지하기 위해 작성할 때에는 표준 방식을 사용하는 것이 좋습니다. (나중에 제공하겠습니다)
그렇지 않으면 다인 협업 작업에서 상당히 번거로울 것입니다.
데모 데모가 필요하시면 이메일로 보내주세요. 나는 그것을 게시하지 않을 것이다.
코드 복사 코드는 다음과 같습니다.

/* * 비극은 일어나지 않습니다 다음 코드를 사용하세요
* 최종 결론
* E(e).stop(); 시간 버블링 방지
* E(e).prevent(); 시간 기본 동작 방지
*/
var E = function(e){
e = window.event || e
return {
stop: function() {
if (e && e.stopPropagation) e.stopPropagation( );
else e.cancelBubble = true
},
prevent: function() {
if (e && e.preventDefault) e.preventDefault()
else e.returnValue = 거짓
}
}
}
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.

뜨거운 기사 태그

메모장++7.3.1

메모장++7.3.1

사용하기 쉬운 무료 코드 편집기

SublimeText3 중국어 버전

SublimeText3 중국어 버전

중국어 버전, 사용하기 매우 쉽습니다.

스튜디오 13.0.1 보내기

스튜디오 13.0.1 보내기

강력한 PHP 통합 개발 환경

드림위버 CS6

드림위버 CS6

시각적 웹 개발 도구

SublimeText3 Mac 버전

SublimeText3 Mac 버전

신 수준의 코드 편집 소프트웨어(SublimeText3)

C 언어의 return 사용법에 대한 자세한 설명 C 언어의 return 사용법에 대한 자세한 설명 Oct 07, 2023 am 10:58 AM

C 언어의 return 사용법에 대한 자세한 설명

Java에서 return 및 finally 문의 실행 순서는 무엇입니까? Java에서 return 및 finally 문의 실행 순서는 무엇입니까? Apr 25, 2023 pm 07:55 PM

Java에서 return 및 finally 문의 실행 순서는 무엇입니까?

자바스크립트 함수 반환값과 반환문에 대한 자세한 설명 자바스크립트 함수 반환값과 반환문에 대한 자세한 설명 Aug 04, 2022 am 09:46 AM

자바스크립트 함수 반환값과 반환문에 대한 자세한 설명

Python에서 반환 값을 사용하는 방법 Python에서 반환 값을 사용하는 방법 Oct 07, 2023 am 11:10 AM

Python에서 반환 값을 사용하는 방법

Vue3는 어떻게 설정 구문 설탕을 사용하여 반환 쓰기를 거부합니까? Vue3는 어떻게 설정 구문 설탕을 사용하여 반환 쓰기를 거부합니까? May 12, 2023 pm 06:34 PM

Vue3는 어떻게 설정 구문 설탕을 사용하여 반환 쓰기를 거부합니까?

JavaScript에서 return 키워드 사용 JavaScript에서 return 키워드 사용 Feb 18, 2024 pm 12:45 PM

JavaScript에서 return 키워드 사용

Java에서는 메소드의 return 문이 실행된 후 finally 블록이 실행됩니까? Java에서는 메소드의 return 문이 실행된 후 finally 블록이 실행됩니까? Sep 17, 2023 pm 03:05 PM

Java에서는 메소드의 return 문이 실행된 후 finally 블록이 실행됩니까?

JavaScript에서 return 문을 사용하는 방법 JavaScript에서 return 문을 사용하는 방법 Feb 26, 2024 am 09:21 AM

JavaScript에서 return 문을 사용하는 방법

See all articles