Question

对不好的名字感到抱歉，但我脑子里有一些方法，我不知道哪个有潜力在这里。我试图让它点击一个表格单元格调用一个Javascript函数，但只有当该表格单元格中的子元素没有点击时才会显示“a”。

这是我的一些HTML。我不能修改它。

<td class="DayStyle" align="right" style="color:#CEE2ED;border-color:#CEE2ED;border-width:3px;   border-style:solid;width:14%;">
    <a title="July 19" style="color:#CEE2ED" href="javascript:__doPostBack('myCal','4217')">19</a>
</td>

我正在使用这个jQuery来实现这一目标：

$(".myCal").find("td.DayStyle").click(function() {
   //DoStuff
});

如果在这个函数中，我得到'$（this）.attr（“class”））'，我总是得到DayStyle，假设那是因为那是抓住点击的。

导致的行为是当用户点击表格单元格或表格中的文本/“a”时发生DoStuff。我想要的行为是DoStuff仅在单击表格单元格时发生，而不是在其中的文本中发生。

我正在考虑的方法:: 1）尝试捕获单击“a”元素并且什么也不做的.click（）事件。 2）找到用户点击的位置并检查该位置是否有文本或“a”。 3）以某种方式在click函数中指定单击“a”或具有“title”属性的任何东西都不合适。

Answer 1

尝试使用event.target

$(".myCal").find("td.DayStyle").click(function(e) {
   if($(e.target).hasClass('DayStyle')) {

   }
});

或

if(!$(e.target).is('a')) {

}

Answer 2

试试这个：

$('td.DayStyle a').click(function(event){

    try
    {
        // Prevent click event from travelling up the DOM tree
        event.stopPropagation();
    }
    catch(err)
    {
        // IE does it this way
        window.event.cancelBubble=true;
    }
});

Answer 3

在这种情况下，您也可以使用委托来优化代码。

$(".myCal").delegate("td.DayStyle", "click", function(e) {
   if(!$(e.target).is('a')) {
      //do Stuff
   }else{ //do nothing or someother logic goes here }
});

什么接受click（）事件的jQuery限制

3 个答案: