구글 크롬의 버그가 <select> 요소

Question

HTML의 온 클릭 그들 중

document.getElementById('about').onclick = function(){ 
    alert('normal onclick'); 
} 
$("#about").click(function(){ 
    alert("jquery click") 
}); 

없음 크롬에서 작동, 오직

이 무슨 일 이죠 크롬 것 같아?

다음은 jsfiddle 간다 : http://jsfiddle.net/S9ZK3/2/

Answer 1

대신 option의 select 요소에 이벤트 핸들러를 넣고, 모든 브라우저에서 작동합니다.

$('#page').on('change keyup', function() { 
    var selected = this.value; 
    if(selected == 'about') 
     alert('About!'); 
}); 

Updated fiddle

왜 모두 change 및 keyup 이벤트 다음 change 및 keyup 이벤트를 사용? change 이벤트는 마우스 상호 작용을 처리하고 화살표 키 또는 다른 키를 사용하여 선택기에서 위아래로 탐색 할 때 keyup은 선택기를 응답시킵니다.

또는 keyup을 생략하고 change 이벤트 만 수신 할 수 있습니다. 그런 다음 선택기를 열고 커서 키를 사용하여 위아래로 이동하면 Enter 키를 누르기 전까지 아무 일도 일어나지 않습니다. 그러면 change 이벤트가 발생합니다.

키보드를 사용하여 목록에서 위아래로 탐색 할 때 사용자에게 즉각적인 피드백을주고, change keyup을 청취하는 것이 더 도움이되는 경우가 많습니다.

click 대신 change이 필요한 이유는 무엇입니까? 둘 중 하나를 사용할 수도 있지만 값이 실제로 변경되지 않은 경우에도 모든 클릭에서 click 이벤트가 실행됩니다. OTOH 은 사용자가 이미 선택한 옵션을 클릭하더라도 이벤트가 발생하므로 click 이벤트가 더 좋을 것입니다.

사실, 조금 더 테스트 한 후에 click 대 change 개의 질문이 더 있습니다. 그것은 아래로 누르면 계속 옵션에 그것을 롤, 그리고 마지막으로 그것을 풀어,

1. 셀렉터에 마우스 : 선택 목록과 일반 마우스 상호 작용을 사용하여 두 개의 약간 다른 방법을 할 수 있습니다.

2. 에서 마우스를 누르고을 놓습니다. 선택기가 열리고 옵션이 표시됩니다. 옵션 위로 마우스를 가져 가면 (이 시점에서는 버튼이 눌러지지 않음) 마지막으로 옵션의 버튼을 클릭합니다. 초기 클릭과 옵션을 선택 최종 클릭에 이벤트가 발생 두 번 다음 사례 # 2, 대신 change의 click 이벤트를 수신하는 경우

. 따라서 클릭 수를 모두 선택할지 아니면 마지막 옵션을 선택할지에 따라 click 또는 change을 사용할 수 있습니다.

내가 여기 click을 철저히 테스트하지 않았다는 것을 추가해야하지만, change과 change keyup을 매우 철저히 테스트 했으므로 그 이상을 신뢰합니다.