通過點擊內部禁用 HREF

Question

如果在<a>元素中觸發了具有onclick函數的元素，如何禁用 a href ？

我試過event.preventDefault(); ，但它似乎沒有任何作用。
我該如何解決這個問題？

 $(function() { $(".inside > .fa").click(function(event) { event.preventDefault(); alert("TEST"); }); });

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

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

Answer 2

嘗試return false而不是event.preventDefault()來停止事件冒泡

Answer 3

在<a>標記上注冊您的事件偵聽器。 並在下面進行更改。 這利用了事件委托（一件好事）。

你將需要這兩個：

event.preventDefault();

添加

event.stopPropagation();

最后，您需要進行測試以確保點擊的元素不是<a> ； 所以你的代碼看起來像這樣：

這是一個演示這一點的代碼筆：

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