如何从触发器中排除特定的子元素

Question

  

可能重复：
  Prevent execution of parent event handler

我正在使用一个不错的插件（jQuery drop-down）将下拉列表添加到表格行中：

属性放置在触发器对象上，该触发器对象包含要显示的菜单的ID。在这种情况下，表格行上的“数据下拉列表”。

<tr data-dropdown="#dropdown-first">
  <td><a href="http://www.boston.com">Basic</a></td>
  <td>The basic plan</td>
</tr>

我的问题是其中一个TD包含一个链接，但该链接将始终触发下拉而不是启动新页面。这是调用菜单的插件代码片段：

$(function () {
    $('BODY').on('click.dropdown', '[data-dropdown]', showMenu);
    $('HTML').on('click.dropdown', hideDropdowns);
});

有没有办法修改.on事件中的选择器以排除特定的子标记，例如我的链接？ 还有其他建议的策略吗？我想尽可能保持插件的完整性，以便它可以高度重复使用。

Answer 1

问题是你将data-dropdown属性放在行上。单击该行中的任何内容都将触发该事件，并且showMenu中的逻辑甚至不会检查一旦单击任何内容后是否应该继续。

整行必须导致下拉列表吗？如果没有，请将数据下拉列表放在行内的某些内容中。

否则，修改jquery.dropdown.js并在event.preventDefault（）行之前的第41行添加：

if (trigger != event.target && $(event.target).hasClass('dropdown-ignore')) return;

然后将“dropdown-ignore”类添加到您的boston.com链接。

Answer 2

您可以尝试取消绑定与保存相关的所有点击事件（插件实例化后）

HTML

<tr data-dropdown="#dropdown-first">
   <td class="disable-dropdown"><a href="http://www.boston.com">Basic</a></td>
   <td>The basic plan</td>
</tr>

JAVASCRIPT

$('.disable-dropdown').unbind('click');