jQuery 변경 이벤트가 다중 선택 외부에서 마우스를 놓을 때 IE에서 실행되지 않음

Question

좋아,이 질문에 대한 제목을 제시하는 데 시간이 걸렸습니다.

다중 선택 목록이 있고 jQuery를 사용하여 변경 이벤트를 감지했다고 가정 해 보겠습니다. 정상적인 조건에서 Firefox 및 IE에서 정상적으로 작동합니다. 그러나 IE에서 목록에서 항목을 선택하고 커서가 선택 항목 밖에있을 때까지 마우스를 놓지 않으면 이벤트가 실행되지 않습니다. Firefox에서 작동합니다.

HTML :

<select size="4" name="ListBox" multiple="multiple" id="ListBox"> 
    <option value="32">32</option> 
    <option value="48">48</option> 
</select> 

자바 스크립트 : http://jsfiddle.net/as7EN/1/

FF 3.6.12 : 당신은 여기 예제를 테스트 할 수 있습니다

$(ListBox).change(function() 
{ 
    alert("Change fired"); 
}); 

는
IE8 작동 :

작동하지 않습니다

의견을 보내 주셔서 감사합니다. 엔.

Answer 1

그것이 jQuery를 1.4의 밝혀 있음을 해킹 할 수 있습니다. * 버그!

필자는 이전 버전의 jQuery 1.3.2를 사용하여 피들을 다시 테스트했으며, 제대로 작동하는지 확인했습니다.

나는 당신이 그 (것)들을 그것을 해결하려는 경우가 내 보고서를 투표하십시오, jQuery의에서 버그 리포트를 게시 (아주 작은 화살표 옆에있는 "이전 티켓"링크 티켓 위) :

http://bugs.jquery.com/ticket/7698

Answer 2

hackish 솔루션

[편집 솔루션]

var clickDown = false; 
var currentlySelected = null; 

$("#ListBox").mousedown(function (event) 
{ 
    clickDown = this; 
}); 

$(document).mouseup(function() { 
    setTimeout(function() { 
     if (clickDown) { 
      if (currentlySelected != clickDown.selectedIndex) { 
       alert("change"); 
       currentlySelected = clickDown.selectedIndex; 
      } 
      clickDown = false; 
     } 
    }, 0); 
}); 

는 기본적으로 mouseDown에 우리는 당신이 목록 상자를 클릭 말하는 플래그를 설정합니다.

그러면 전체 문서에서 mouseUp를 확인합니다. 입니다. IE8이 selectedIndex를 올바르게 설정하는지 확인하기 위해 전체 기능을 제한 시간 내에 포장합니다. clickDown 플래그가 설정되면 clickUp이 목록 상자에서 가져온 것입니다. convience 들어, 또한 (object === true) 이후 자바 스크립트에서 플래그에 목록 상자 개체를 저장합니다.

그러면 현재 색인을 포함하는 변수가 변경되었는지 간단히 확인합니다. 그렇다면 변경이 발생하고 새 색인을 반영하도록 해당 변수를 업데이트합니다.

마지막으로 우리는 clickDown을 false로 설정해야합니다. 문서에서 다른 외부 클릭은 목록 상자에서 생각할 것입니다.

이 모든 검사가 클릭 더 포함하여 없다은 크롬을 고정한다는 우아한 용액

http://jsfiddle.net/as7EN/37/

[편집]을 의미한다. IE8은 아닙니다. 그것에 종사.

나는 mouseUp 이벤트가 트리거 된 후 IE가 selectedIndex를 변경한다는 사실을 좁혔습니다.

IE8이 selectedIndex를 실제 값으로 설정 한 후에 함수가 호출되도록 timeOut에이 버그를 넣으면 피할 수 있습니다. 나는 IE6/7에 대해 신경 쓰지 않는다.

은 또한 당신은 다중 선택이 말해 작업 할 경우 나는 주위 aswell