javascript - jQuery 自定义 UL 类型下拉列表 : blur() does not work on iOS

Question

我做了一个基于 jQuery 的选择框。

除了 iPhone 上的模糊功能外，一切正常(我在 Macbook 上的 iOS 模拟器上进行了测试。)它在 Android 上运行良好。这是我写的。

$('.listSelect a').on('click',function(e){
    var text = $(this).text();
    $('.listSelected').removeAttr('tabindex').removeClass('focus').blur().find('strong').text(text);
    //$('.listSelect').slideUp('fast');
    e.preventDefault();
});
$('.listSelected').on('click',function(e){
    var attr = $(this).attr('tabindex');
    if(typeof attr == 'undefined' || attr == false){
        $(this).attr('tabindex','0');
    } else {
        console.log('Yes!');
        $(this).removeAttr('tabindex');
    }
    $(this).toggleClass('focus').focus();
    $('.listSelect').slideToggle('fast');
}).on('blur',function(){
    $('.listSelect').slideUp('fast');
    $(this).removeAttr('tabindex').removeClass('focus');
});

这是我的代码:http://jsfiddle.net/nori2tae/jXTTh/

只需点按下拉列表之外的任意位置(聚焦)即可。该列表不想在 iPhone 上返回。

任何模组建议表示赞赏。谢谢!

Answer 1

Focus/Blur仅适用于表单元素，例如 input、select 或 textarea。

您需要的是 stopPropagation .

...或者类似的东西:

$(document).on('touchend', function(e) {
    if ( !$('body').has(e.target).length ) {
        $('.listSelect').slideUp('fast');
    }
});

Demo