查找使用jQuery的兩個部門之間的點擊

Question

我有兩個部門，分別爲one和two，作爲除法部門one內的部門two。現在，如果我點擊one內部但在two之外點擊並提醒TWO，如果我在two內點擊，現在要提醒ONE。

這是我試過的。

HTML：

<div id="one"> 
    ONE ONE<br>ONE ONE<br> 
    <div id="two"> 
    TWO TWO<br>TWO TWO<br> 
    </div> 
    ONE ONE<br>ONE ONE<br> 
</div> 

JS：

$("div").click(function(event){ 
    var target = $(event.target); 
    if(target.is("two")){ 
     alert("two"); 
    }else{ 
     alert("one"); 
    } 
}); 

在此先感謝您的幫助。

Answer 1

當你嵌套的div，都與事件處理程序，但只需要一個事件，你需要使用

event.stopPropagation(); 

首先想到的是使用event.preventDefault()但是：

preventDefault（）方法不會阻止通過DOM進一步傳播事件。使用stopPropagation（）方法來處理這個問題。

ref

Secondingly，所述.is函數採用一個選擇作爲參數，所以將是一個類選擇（.class）或ID（#id）。

給你的更新代碼：

$("div").click(function(event){ 
    var target = $(event.target); 
    if(target.is("#two")){ 
     // don't bubble up to get two events 
     event.stopPropagation(); 
     alert("two"); 
    }else{ 
     alert("one"); 
    } 
}); 

工作小提琴：https://jsfiddle.net/phubzq68/

Answer 2

$(document).ready(function(){ 
    $("div").click(function(){ 
     var id = $(this).attr('id'); 
     switch (id) { 
      case 'one': 
       alert('one'); 
       break; 
      case 'two': 
       alert('two'); 
       break; 
    }); 
}); 

注：未經檢驗

Answer 3

$("#one").click(function(event) { 
 
    alert("one"); 
 
}); 
 
$("#two").click(function(event) { 
 
    event.stopPropagation(); 
 
    alert("two"); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="one"> 
 
    ONE ONE 
 
    <br>ONE ONE 
 
    <br> 
 
    <div id="two"> 
 
    TWO TWO 
 
    <br>TWO TWO 
 
    <br> 
 
    </div> 
 
    ONE ONE 
 
    <br>ONE ONE 
 
    <br> 
 
</div>

1. 有兩個
2. 個獨立點擊然後用event.StopPropagation()，以避免冒泡