Question

我有一个由两个日历控制的图表。如果用户单击并打开一个日历以选择日期，则单击日历应关闭的日历的任何位置。由于存在“开始日期”和“结束日期”日历，因此它们彼此关闭。所以我试图想出一个新的解决方案。我目前的解决方案看起来像这样。

$(document).click(function() {
    if (this !== $("#startDate") && this !== #("#endDate")) {
        $("#startDate").hide();
        $("#endDate").hide();
    }
});

显然，这个if语句会在每次点击时触发。我认为这是一种很糟糕的做法，但却无法想到更聪明的方式。谁有更好的方法？请记住，有两个日历不能相互关闭。

Answer 1

试试这个

$(document).click(function(e) {
    if (e.target.id !== "startDate" && e.target.id !== "endDate") {
        $("#startDate").hide();
        $("#endDate").hide();
    }
});

有更好的方法来实现这一点。您可以在不希望日历关闭的元素上停止事件传播。所以在你的情况下，它是日历开启链接。

试试这个

$("#startDate, #endDate").click(function(e){

   e.stopPropagation();

});

现在你不必在隐藏起点和结束日期时检查任何条件。

$(document).click(function(e) {
   $("#startDate").hide();
   $("#endDate").hide();
});

Answer 2

处理每次点击确实不是那么糟糕。您仍然可以稍微优化点击事件处理程序中的代码：

$(document).click(function() {
    var id = $(this).prop('id');
    if (id !== "startDate" && id !== "endDate") {
        $("#startDate").hide();
        $("#endDate").hide();
    }
});

这样可以避免在每次单击时为#startDate和#endDate构建jQuery包装器，只是为了进行比较。

顺便说一句，如果已经为#startDate和/或#endDate设置了点击事件处理程序，并且你正在调用e.stopPropagation（）或从那些/那些点击事件处理程序返回false ，您无需在$(document).click处理程序中进行检查。如果在处理完click事件后停止传播它，它将无法进入文档级别。例如，假设您正在处理两者的点击次数：

$("#startDate").click(function(e) {
    e.stopPropagation();
    // Handle startDate click logic...
});

$("#endDate").click(function(e) {
    // Handle endDate click logic...
    return false;
});

$(document).click(function() {
    // Clicked element cannot be #startDate or #endDate.
    $("#startDate").hide();
    $("#endDate").hide();
});

Answer 3

您可以将一个类应用于两个日历以进行检查。这样一来，如果你需要点击其他对象而不会因为任何原因而关闭，你也可以将它们应用于它们。此外，使用.is（）将使代码更清晰。

http://api.jquery.com/is/

$(document).click(function(event) {
    if (!$(event.target).is('.calendar')) {
        $("#startDate").hide();
        $("#endDate").hide();
    }
});

您还可以使用第二个类来告诉您要关闭的内容。

$(document).click(function(event) {
    if (!$(event.target).is('.calendar')) {
        $(".calendarClose").hide();
    }
});

<div id="startDate" class="calendar calendarClose"></div>
<div id="endDate" class="calendar calendarClose"></div>

更好的方式来监听点击事件

3 个答案: