如何忽略 jQuery 嵌套 <a> 的手风琴点击事件

Question

我有这个代码

<div id="accordion">
  <h3>Section 1 <a href="www.google.com">Google</a> </h3>
  <div>
      Text...
  </div>
  <h3>Section 2</h3>
  <div>
   Text...
  </div>  
</div>

而且我无法在 <h3> 中使用 <a> 标签，因为 jQuery 手风琴 expan/collapse 事件发生了。

如何避免该事件，以便<a>独立手风琴活动？

Answer 1

你能post你正在使用的 jquery 插件的代码或 link 吗？听起来 jquery 代码是运行函数 preventDefault() 并且 a 标签正在冒泡并触发该事件。

你可以像

这样在锚点上包装一个事件

$('#accordian').on('click', 'a', function(e) {
    e.stopPropogation();
    window.location.href = this.href;
});

现在，如果您在锚标记内添加元素，请小心使用此代码。如果您单击该元素，它不会成为启动事件的锚点，它会具有 href 属性。

Answer 2

事件传播，当有人点击 <a> 标签时，您可以停止事件传播。我相信这可行。

$(document).on('click', '.link', function (e) {e.stopPropagation();});

如果您希望 'link' 有一个选择器，请将 class link 添加到 <a>。

<div id="accordion">
  <h3>Section 1 <a class="link" href="www.google.com">Google</a> </h3>
  <div>
    Text...
  </div>
  <h3>Section 2</h3>
  <div>
    Text...
  </div>  
</div>

Answer 3

我找到了适合我的解决方案。

<div id="accordion">
  <h3>Section 1 <a href="www.google.com" class="openLink" onclick="OpenLink(this);">Google</a> </h3>
  <div>
      Text...
  </div>
  <h3>Section 2</h3>
  <div>
   Text...
  </div>  
</div>

 function OpenLink(element)
    {
        console.log(element.href);
        window.location = element.href;
        return false;
    }

还有另一种解决方案

$('.openLink').bind('blur change click error keydown keypress keyup mousedown mouseenter mouseleave mousemove mouseout mouseover mouseup', function (event) {
            event.stopPropagation();
        });

如何忽略 jQuery 嵌套 <a> 的手风琴点击事件

How to ignore jQuery accordion click event for the nested <a>

javascript

jquery

jquery-ui-accordion