javascript - 在外部单击时，iPad 上的 jQuery UI 选择菜单无法正确关闭

Question

我正在使用 jQuery UI 生成一个选择菜单。它在桌面上运行良好，但在尝试关闭它时在 iPad 上出现奇怪的行为。在我正在使用的网站上，单击框/下拉列表外的任何地方都不会关闭它，除非我单击框左侧的区域。

代码非常基础。 HTML:

<select>
    <option>Slower</option>
    <option>Slow</option>
    <option selected="selected">Medium</option>
    <option>Fast</option>
    <option>Faster</option>
</select>

Javascript:

$("select").selectmenu();

CSS:

.ui-selectmenu-button{
    font-size:16px!important;   
    height:35px;
    background-color:#fff;
    background-image:none;
    min-width:200px;
}

我在这里创建了一个演示:https://jsfiddle.net/8fwcms5v/1

行为与我网站上的不太一样。但是您会看到单击选择上方的任意位置(当它打开时)不会将其关闭。

谢谢。

Answer 1

这应该有效:

Demo

$("select").selectmenu();

$("html").bind("click touchstart",function(e) {
  console.log(e.target.className)
  if (e.target.className === "ui-selectmenu-text" ||
    e.target.className === "ui-menu-item" || e.target.className === "ui-icon ui-icon-triangle-1-s") {
    return;
  } else {
    $("select").selectmenu("close");
  }
});