Question

我有两个html元素如下：

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

我制作了一个代码，除了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）。你知道为什么它没有工作吗？

Answer 1

您必须在document jQuery符号中包围$。

所以你的代码变成了，

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

或者，你可以这样指定：

$document = $(document);

为你创建一个小提琴，在Safari 10上工作正常：https://jsfiddle.net/1ymrtcbf/

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

1 个答案: