jQuery-chosen 插件：不监听 iPad 中的触摸事件答案

【问题标题】：jQuery-chosen plugin: not listening for touch event in iPadjQuery-chosen 插件：不监听 iPad 中的触摸事件
【发布时间】：2020-03-13 20:34:11
【问题描述】：

我正在使用 jQuery 选择的插件进行多选下拉，在桌面上一切正常，但在 iPad 中，当我尝试通过触摸取消选择所选选项时（鼠标点击事件工作正常），它不是监听触摸事件（虽然我已经写了“touchend”事件）。

我应该使用哪个事件来完成这项工作？

【问题讨论】：

您能否展示您的代码、屏幕截图等示例？
drive.google.com/file/d/0Bwhr5B_lk7LtUlFfMkpkTTI2cDA/view - 在这里你可以看到截图说 Kholov ，问题是当我点击任何一个它正在工作但触摸不起作用的十字标记时
如果有帮助，能否请您标记答案？

标签： jquery jquery-chosen

【解决方案1】：

jQuery Chosen 插件实际上有这个错误。

在控制台http://harvesthq.github.io/chosen/中测试了这段代码有效

var x = document.getElementsByClassName("search-choice-close");
//search-choice-close is class of X button.
for (var i = 0; i < x.length; i++) {
    x[i].addEventListener('touchend', function(e) {
       this.parentNode.remove()
    }, false);
}

【讨论】：

我还没有检查过@Said Kholov，我现在没有 iPad，明天我会检查它并告诉你。 :)
您可以在浏览器中进行测试。 chrome 中肯定有一个设备模拟器。
你为什么在那里使用for循环？ @Siad Kholov
它返回几个带有“search-choice-close”类的项目
是的，知道了@Said Kolov，我现在什至没有代码来检查它。我会尽快检查的。

【解决方案2】：

说 Kholov 的答案适用于现有标签，但不适用于新创建的标签。你可以试试这个：（效率不高但有效）

 //Fix the remove item on touch devices
if (Modernizr && Modernizr.touch) {
    $('.chosen-choices').on('touchend', '.search-choice-close', function(){
        var $this = $(this);
        var $select = $this.closest('.chosen-container').prev('select');
        var toRemove = $.trim($this.parent().text());
        var vals = $select.val();
        vals = $.grep(vals, function(value) {
            return $.trim(value).trim() !== toRemove;
        });
        $select.val(vals).trigger('chosen:updated');
   });
}

【讨论】：

没有 Modernizr，它应该可以正常工作@Aamir Afridi？
可以使用jQuery或者原生js来检测触控设备。谷歌“检测触摸设备 javascript”
必须进行一些修改以确保它适用于多个实例。这仅适用于第一个多选框...我会找到解决此问题的方法。
实际上，如果选项的 value="" 与其中显示的文本不匹配，则此解决方案不起作用，通常是这种情况。
嗯。如果您找到解决方案，请更新答案

【解决方案3】：

解决此问题的最简单最优雅的方法是使用modernizr 从 TOUCH 事件触发 CLICK 事件。

$.getScript('/js/modernizr-custom.js', function() {

    if (Modernizr && Modernizr.touchevents) {
        $('.chosen-choices').on('touchend', '.search-choice-close', function(){
            $(this).trigger('click');
       });  
    }
});

【讨论】：

【解决方案4】：

有 2 个问题 1- 删除按钮不起作用 2- 单击添加时添加第一项后菜单未打开：

只需使用以下方法破解它：

1- 添加侦听器以检查您的下拉菜单何时更改：

$(".chosen-select").chosen().change(updateChosen);

2- 像我一样创建函数来处理它：

function updateChosen(){
        $(".search-choice-close").on("touchend", function () {
        $(this).trigger("click");
    });
    //Open Menu again 
    $(".chosen-choices").on("touchend", function(){
        $(this).find(".chosen-search-input").blur().focus();
    });
}

黑客日快乐 :)

【讨论】：