Question

我一直致力于为我的业务开发的Web App的搜索过程。

我目前有一个搜索字段，当满足条件时，会使DIV可见，其中包含用户搜索字词的建议匹配项。这一切都正常，除了我遇到问题，eventListener正确响应移动“触摸”。当任何地方点击页面的BODY时，eventListener会隐藏DIV。但是，在移动设备上，我必须专门触摸页面上的输入字段或其他元素才能执行Java函数。

我希望触摸响应与鼠标单击相同...我能够在任何地方触摸页面以执行Java函数并隐藏DIV。我怎么能这样做？

免责声明：我之前从未编写或编辑过Javascript，因此我目前使用的是从许多资源中剪切和粘贴的。

这是代码：

function myFunction() {
    var input = document.getElementById("searchterm").value;

        if (input && input.length >= 2) {

            $.ajax({
            type: "POST",
            url: "searchengine.php",
            data: {input : input},

            success: function(data) {

            if (data){
            document.getElementById("body").addEventListener("click", resultsVisibility);   
            document.getElementById("results").style.visibility='visible';
            document.getElementById("results").innerHTML = data;
            }

            else{
            document.getElementById("results").style.visibility='hidden';
            }

            }

            }); 

        }
        else {
            document.getElementById("results").style.visibility='hidden';
            return false;
        }
}

function resultsVisibility() {
    document.getElementById("results").style.visibility='hidden';
    document.getElementById("body").removeEventListener("click", resultsVisibility);
}

Answer 1

您的意思是使用此查询body标记吗？

document.getElementById("body");

这会查询id属性为body的元素。不确定你的意思。如果你的意思是实际的文档正文，你可以简单地引用它：document.body。不需要查询。如果您确实需要id body的元素，那么您可以更改我的以下代码。

编辑：使用div id切换到body。预警，您应该避免使用id并使用class es。由于重复id，我看到太多网站出现错误。 class不要遭受同样的命运。

除touchstart事件外，只需附加click个事件：

(function() {
    var results = document.getElementById("results");
    var fakeBody = document.getElementById("body");
    var resultsVisibility = function() {
        results.style.visibility = "hidden";
        fakeBody.removeEventListener("click", resultsVisibility);
        fakeBody.removeEventListener("touchstart", resultsVisibility);
    };

    var myFunction = function() {
        var input = document.getElementById("searchterm").value;

        if (input && input.length >= 2) {
            $.ajax({
                type: "POST",
                url: "searchengine.php",
                data: { input: input },

                success: function(data) {
                    if (data) {
                        fakeBody.addEventListener(
                            "click",
                            resultsVisibility
                        );
                        fakeBody.addEventListener(
                            "touchstart",
                            resultsVisibility
                        );
                        results.style.visibility = "visible";
                        results.innerHTML = data;
                    } else {
                        results.style.visibility = "hidden";
                    }
                }
            });
        } else {
            results.style.visibility = "hidden";
            return false;
        }
    };
})();

此外，您应该存储多次使用的元素，而不是一遍又一遍地查询DOM。查询DOM是慢。我还冒昧地将所有代码包装在IIFE中。这可以防止你使用隐式全局变量。

“点击”事件在移动设备上没有响应

1 个答案: