Question

I have got this code

<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>

And I cannot get working <a> tag within a <h3> coz the jQuery accordion expan/collapse event happans.

How to avoid that event so <a> is working independently from accordion event?

Answer 1

你可以发布你正在使用的jquery插件的代码或链接吗？听起来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();});

如果您需要，请将类链接添加到<a>链接＆＃39;有一个选择器。

<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();
        });

如何忽略嵌套<a>

3 个答案: