Question

我有以下标记：

<a class="list-group-item hola" id="competition-card-<%= competition.id %>" href="a_url_to_a_site">
    <div class='row'>
          <div class='col-xs-11'>
            Some text
          </div>

        <div class='col-xs-1 shows-submenu'>
           Some text
        </div>
    </div>
</a>

我正在努力实现：

如果用户点击“a”标记，则会将其定向到某个网站，除非......
用户点击“.shows-submenu”div显示隐藏的div。

我的jQuery如下：

$('body').on('click', '.shows-submenu', function(e) {
   event.stopImmediatePropagation();
  if ($(this).closest('a.list-group-item').next('.hidden-group-item').hasClass('hide')) {
     $('.hidden-group-item').addClass('hide');
     $(this).closest('a.list-group-item').next('.hidden-group-item').toggleClass('hide');
  }
  else {
     $(this).closest('a.list-group-item').next('.hidden-group-item').toggleClass('hide');
  }
});

目前，如果我点击“.shows-submenu”div，“a”标签仍会被调用，我将被定向到该网站。因为我正在使用bootcards插件，所以我无法将'a'标签更改为div。

有没有办法只在点击'.shows-submenu'div时停止'a'。我尝试在'a'和'div'中使用stopPropagation但没有成功。

Answer 1

您正在寻找的是event.stopPropagation()，它会阻止冒泡，而event.preventDefault会避免链接onClick的默认行为。

幸运的是，在jQuery中，单击处理函数返回false将触发两者。有关此主题的更多信息，请访问：https://stackoverflow.com/a/1357151/670377

所以你只需要将你的功能修改为：

$('document').on('click', '.shows-submenu', function(e) {
  if ($(this).closest('a.list-group-item').next('.hidden-group-item').hasClass('hide')) {
     $('.hidden-group-item').addClass('hide');
     $(this).closest('a.list-group-item').next('.hidden-group-item').toggleClass('hide');
  }
  else {
     $(this).closest('a.list-group-item').next('.hidden-group-item').toggleClass('hide');
  }
  // This will be equivalent to 
  // e.preventDefault; e.stopPropagation;
  return false;
});

event.stopImmediatePropagation的另一个目的不仅仅是停止默认功能，它还会阻止调用该元素的所有剩余侦听器。

Answer 2

我认为你想要的是event.preventDefault()。 Y和event.stopPropagation()都会影响其他事件处理程序，但不会影响锚点的默认行为。你也应该将参数声明为event.stopImmediatePropagation()，如果你在函数内部引用它的话：

event

$('.show-submenu').on('click', function(event) {
  event.preventDefault();
});

有没有办法让这些链接在另一个链接中工作

2 个答案: