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

Question

可能重复：
阻止执行父事件处理程序

我正在使用一个不错的插件（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 事件中的选择器以排除特定的子标签，例如我的链接？还有其他建议的策略吗？我想尽可能保持插件完整，以便它高度可重用。

score 1 · Accepted Answer

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

整行是否必须导致下拉？如果没有，请将数据下拉列表放在行内的某处。

否则，修改 jquery.dropdown.js 并将其添加到第 41 行，在 event.preventDefault() 行之前：

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

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

score 0 · Accepted Answer

您可以尝试取消绑定与包含的所有单击事件（在插件实例化后）

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');

2 回答 2