먼저
다음 이벤트를 여기에 바인딩합니다
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 = 거짓
}
}
}