在 Ipad 上单击外部时使搜索字段（带有结果）消失

Posted 2023-03-14

【中文标题】在 Ipad 上单击外部时使搜索字段（带有结果）消失

【英文标题】：Making the search field (with results) disappear when clicking outside on Ipad

【发布时间】：2016-12-27 09:06:34

【问题描述】：

我有两个html元素如下：

类为“fts-input”的输入元素。此输入用作搜索框。 一个div容器，包含所有结果列表，其类为“dropdown-items-wrapper”

我编写的代码可在除 Safari 之外的所有浏览器中运行，当在搜索字段外或搜索结果外单击时，搜索结果会消失。这段代码是：

    var ftsInput = $('.fts-input');
    var dropDownList = $('.dropdown-items-wrapper');

 function closeSearchWhenClickingElsewhere(event, dropDown) 
    var clickedElement = event.target;
    if (!clickedElement) return;

    var elementClasses = clickedElement.classList;
    var clickedOnSearchOrResults = elementClasses.contains('fts-input') ||
        elementClasses.contains('dropdown-items-wrapper');

    if(!clickedOnSearchOrResults) 
        dropDown.fadeOut('slow');
    


    $document.on('click', (e) => 
        this.closeSearchWhenClickingElsewhere(e, dropDownList);
    );

但此代码似乎不适用于 Ipad (ios Safari)。你知道它为什么不工作吗？

【参考方案1】：

您必须在 $ jQuery 符号内环绕 document。

所以你的代码变成了，

$(document).on('click', (e) => 
    this.closeSearchWhenClickingElsewhere(e, dropDownList);
);

或者，您可以这样分配：

$document = $(document);

为您创建了一个在 Safari 10 上运行良好的小提琴：https://jsfiddle.net/1ymrtcbf/

【讨论】：

我正在使用 Angular，$document 是 Angular 的原生服务，用于表示文档元素

你能试试上面的改变，让我知道它是否有效吗？

当然。我现在正在尝试（删除缓存等需要时间。）