jQuery：单击子元素时停止父元素的默认操作

Question

我有类似于以下标记的内容：

<a href="http://www.google.com" target="_blank"><span class="test">Test</span></a>

我希望能够点击“.test”元素而不触发链接，我有以下代码似乎停止警报触发，但链接仍然打开

 $("a").click(function(){
     alert("Link!");
 });

 $("a .test").click(function(e) {
    e.stopPropagation();
 });

我现在迷路了。

Answer 1

你可以return false;

$("a").click(function(){
     alert("Link!");
 });

 $("a .test").click(function(e) {
    alert("Span!");
    return false;
 });

<强>更新

使用e.preventDefault()会根据您的需要为您提供不同的行为。

以下代码将阻止加载链接，但仍会执行alert('Link')（即a的事件仍将触发）。 如果要完全省略事件，请使用上面的代码

$("a").click(function(e){
     e.preventDefault();
     alert("Link!");
 });

 $("a .test").click(function(e) {
     alert("span");
 });