通过onclick里面禁用HREF

时间:2018-03-02 01:42:07

标签: javascript jquery html onclick href

如果在href元素中触发了具有onclick功能的元素,如何禁用a <a>

我试过了event.preventDefault();,但它似乎没有做任何事情 我该如何解决这个问题?

&#13;
&#13;
$(function() {
  $(".inside > .fa").click(function(event) {
    event.preventDefault();
    alert("TEST");
  });
});
&#13;
<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<a href='/'>
  <div class='button'>
    <div class='inside'>
      <i class="fa fa-globe"></i>
    </div>
  </div>
</a>
&#13;
&#13;
&#13;

3 个答案:

答案 0 :(得分:1)

点击仍然向上冒泡。请改用event.stopPropagation();。您在没有默认点击行为的元素上使用event.preventDefault(),因此它什么都不做。

$(function() {
  $(".inside > .fa").click(function(e) {
    e.stopPropagation();
    console.log(e.target);
  });
});
a {
  display: block; /* required otherwise you cannot have block level elements like div inside a */
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a href='https://google.com' target="_top">
  <div class='button'>
    <div class='inside'>
      <i class="fa fa-globe"></i>
    </div>
  </div>
</a>

答案 1 :(得分:0)

尝试使用return false代替event.preventDefault()来停止事件冒泡

答案 2 :(得分:0)

<a>标记上注册您的事件监听器。并在下面进行更改。这利用了事件委派(一件好事)。

你需要这两个:

event.preventDefault();

添加

event.stopPropagation();

最后,您需要进行测试以确保点击的元素不是 <a>;所以你的代码看起来像这样:

这是一个用于演示此内容的代码:

https://codepen.io/anon/pen/NyJgWB?editors=1111