안드로이드 기기에서 mousedown 이벤트 처리

오늘 마무리 작업 중인 쇼핑몰 솔루션을 테스트하는 과정에서 특정 안드로이드 기기에서 상품의 옵션을 선택했을 때 추가가 되지 않는 문제가 발견되어 급하게 수정을 했다. select 를 이용해 옵션을 선택하면 선택된 옵션이 동적으로 추가되는 것인데 일부 기기에서 옵션이 자동으로 추가가 되지 않았다. 웹접근성을 맞추기 위해 mousedown 이벤트가 일어나면 option_add 라는 변수를 true로 설정하도록 한 코드에서 문제가 생긴 것이었다.

$("select[name='it_option[]']").live("mousedown", function() {
    option_add = true;
});

삼성 갤럭시 s2와 갤럭시 탭에서 문제가 생겨서 위의 코드를 아래와 같이 수정했다.

var isAndroid = (navigator.userAgent.toLowerCase().indexOf("android") > -1);

if(isAndroid) {
    $("select[name='it_option[]']").live("touchend", function() {
        option_add = true;
    });
} else {
    $("select[name='it_option[]']").live("mousedown", function() {
        option_add = true;
    });
}

결국 안드로이드이면 mousedown 이벤트 대신 touchend 이벤트를 이용해서 처리하도록 하고 그외의 경우는 mousedown 이벤트를 이용해 처리하도록 했다.