Question

我有一个带有namnes的链接列表，如果你单击li，则会加载一个新页面。

除了名字，我还有一个心形图标。

当我点击心脏时，我想阻止链接上的默认行为，而只是打开警报（不加载页面）。如果我点击li上的其他任何地方，那么它应该按预期加载页面。

我现在有这个结构。

<a href="page.html">  
    <li>
      <div class="item-content">
        <div class="item-inner">
          <div class="item-title">Anna Andersson</div>
          <div class="item-after">

        <i class="f7-icons fodelsedag">heart_fill</i>

          </div>
        </div>

      </div>
    </li>
    </a>

这是js代码。

$$(document).on('click', '.fodelsedag', function (e) { 

//so how can I prevent the default on the li here?
alert("test alert")


});

感谢您的任何意见！

Answer 1

您需要更改标记以使其有效。 li必须是ol或ul元素的直接后代，您需要a元素中的li标记：

<ul><li>  
 <a href="page.html" class="link">
  <div class="item-content">
    <div class="item-inner">
      <div class="item-title">Anna Andersson</div>
      <div class="item-after">
        <i class="f7-icons fodelsedag">heart_fill</i>
      </div>
    </div>
  </div>
</a>
</li>
</ul>

然后你的脚本需要防止冒泡：

$(document).on('click', '.link', function (e) {
    e.stopPropagation();
    if ($(e.target).hasClass('fodelsedag')) {
        e.preventDefault();
    }
    alert("test alert");
});

单击href链接列表中的图标时如何防止默认？

1 个答案: