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

我有一个由两个日历控制的图形。如果用户点击并打开一个日历以选择日期，则单击日历应该关闭的日历之外的任何地方。由于有“开始日期”和“结束日期”日历，因此它们互相关闭。所以我试图想出一个新的解决方案。我目前的解决方案看起来像这样。更好的方式来倾听点击事件

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

显然，在每点击这个if语句火灾。我认为这是一个糟糕的做法，但不能想到更聪明的方式。任何人都有更好的方法？请记住，有两个日历不能彼此关闭。

来源

2011-12-19 Jesse Atkinson

如果使用的是萤火虫，你可以右键点击并检查元素得到的不仅仅是$（文件）一个更好的选择 – 2011-12-19 19:38:27

是否有可能兼而有之开放同一时间？如果是这样，你是问“当你点击两个外面的时候，我怎么知道你想关闭哪一个？” – 2011-12-19 19:43:03

试试这个

$(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(); 
});

来源

2011-12-19 19:37:48 ShankarSangoli

辉煌。这正是我所期待的，但想不到的。一年前我不得不停止一个项目的推广，只是想不出我到底做了什么。 – 2011-12-19 20:06:22

您可以将类应用于两个日历以进行检查。通过这种方式，如果您需要让其他对象因任何原因无法关闭而可点击，您也可以将该类应用于它们。此外，使用.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>

来源

2011-12-19 19:41:54 Chris

'this'在本例中引用'document'对象，而不是clicked元素（并且您需要将其包装在'$（）'中以调用jQuery函数）。另外还有jQuery函数'.hasClass（）'，看起来好像在这里工作得很好。 – Jasper 2011-12-19 19:45:05

确实，用于点击特定对象。 – Chris 2011-12-19 19:46:25

@Jasper是的，.hasClass（）可以工作，但如果需要更改相关选择器。当点击任何标签时，他们可能不希望日历关闭，他们可以在.is（）调用中修改选择器。 – Chris 2011-12-19 19:49:48

处理每点击真的不是那么糟糕。不过，你可以优化略有click事件处理程序的代码：

$(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(); 
});

来源

2011-12-19 19:53:25 dgvid

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

回答

相关问题