Question

目前，我有一个表，每一行都在click事件中绑定了一个函数。

HTML：

<tr class="clickable">
...... 
  <td class="text-center">
    <div class="btn-group">
        <button class="btn btn-default btn-sm dropdown-toggle" data-toggle="dropdown">Action <span class="caret"></span>
        </button>
        <ul class="dropdown-menu pull-right text-left">
            <li><a href="#mymodalpath"><i class="fa fa-pencil-square-o"></i> View details</a></li>
            <li class="divider"></li>
            <li><a href="#mymodalpath" data-toggle="ajaxModal"><i class="fa fa-trash-o"></i> Delete</a></li>
        </ul>
    </div>
  </td>
</tr>

JS：

$(document).on('click', ".clickable", function (e) { /*something*/ });

我读到了e.stopPropagation（）方法，但我需要动态的东西，例如，在上面的例子中，下拉菜单是一个我无法管理的外部插件。

---编辑有没有办法处理TR的点击但不触发子元素？

Answer 1

由于事件传播，单击子元素将自动向上传播，直到它到达具有该事件的父.clickable。 e.stopPropagation()唯一可行的方法是，如果您将事件处理程序放在所有子项上，那么它就会停止向父项移动，这可能不是您想要做的事情。相反，您只需检查事件并确切了解实际触发呼叫的内容......

$(document).on('click', ".clickable", function (e) {
  if ($(e.target).hasClass('clickable')) {
    // target is the exact element that is being clicked on, you can test if it is the one
    // one with the 'clickable' class name, or however you want to distinguish it.  If it
    // doesn't get in here, then it is some child element you don't care about.
  }
});

Answer 2

尝试使用空格＆gt;在你的选择器中。如果没有空间，你可以选择.clickable而不是.dropdown-menu，选择空格.clickable不包括后代.dropdown-menu

$(document).on('click', ".clickable > :not(.dropdown-menu)", function (e) { 
    /*something*/ 
});

Answer 3

如果你找到了正在寻找的课程，请尝试打破返回

$(document).on('click', ".clickable", function (e) { 
  if ($(this).hasClass("dropdown-toggle")) {
    return;
  }
  /*something*/ 

});

Answer 4

您想根据点击的内容触发特定功能的问题吗？

执行此操作的最佳方法是根据e.target切换 - 即作为点击目标的元素。像这样：

＆＃13;

$(document).on('click', ".clickable", function (e) { 
  if (e.target.id == 'foo') { // assuming your .clickable element has an id
    foo(); // call some function. 
  }
});

＆＃13;

我认为这种模式可以让你接近你想要的。

Answer 5

＆＃13;

$(document).on('click', '.clickable', function(e) {
    if( $(e.target).is('ul.dropdown-menu, ul.dropdown-menu *') ) {
        return false;
    }
    alert( e.target.nodeName );
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<table>
  <tr class="clickable">
  <td class="text-center">
    <div class="btn-group">
        <button class="btn btn-default btn-sm dropdown-toggle" data-toggle="dropdown">Action <span class="caret"></span>
        </button>
        <ul class="dropdown-menu pull-right text-left">
            <li><a href="#mymodalpath"><i class="fa fa-pencil-square-o"></i> View details</a></li>
            <li class="divider"></li>
            <li><a href="#mymodalpath" data-toggle="ajaxModal"><i class="fa fa-trash-o"></i> Delete</a></li>
        </ul>
    </div>
  </td>
</tr>
  </table>

＆＃13;

Answer 6

只需检查target是否属于下拉列表。使用closest()作为查看目标是否是下拉树的任何部分的方法。

$(document).on('click', ".clickable", function (e) {
  if ($(e.target).closest('.dropdown').length) {
     /* don't do anything since target is within dropdown */
     return;
  }

   /* do something here we've already assured it isn't dropdown */

});

参考closest() docs

Answer 7

您可以检查导致事件触发的目标的tagName。

请注意，target属性是由jQuery提供给我们的，因此它可能不存在。

jsFiddle demo

＆＃13;

$(document).on('click', '.clickable', function(e)
{
    if(e.target != undefined && e.target.tagName.toUpperCase() === "SELECT")
    {
        return false;
    }
    else
    {
        alert("do stuff");
    }
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
    <tr class='clickable'>
        <td style='width:500px;border: 5px solid red;'>
            <select>
              <option value="volvo">Volvo</option>
              <option value="saab">Saab</option>
              <option value="mercedes">Mercedes</option>
              <option value="audi">Audi</option>
            </select>
        </td>
    </tr>
</table>

＆＃13;

可点击的tr但不是孩子

7 个答案: