使用javascript/jquery區分父級和子級之間的點擊

我有2個嵌套的被稱爲毯子和毯子內容的元素，我想識別對父級單獨完成的點擊。使用javascript/jquery區分父級和子級之間的點擊

<div id="blanket"> 
    <div id="blanket-content"></div> 
</div>

我遇到的問題是，當我點擊孩子時它觸發父母點擊。我嘗試過不同的方法，但我沒有成功。我已經試過這些玩我的代碼;

$('#blanket').on('click', function(ev) { 
    alert(ev.currentTarget.id); // 
});

^這會觸發正常點擊div，並且即使在單擊子元素時也會聲明父級ID。

$('#blanket-content').on('click', function(ev) { 
     alert(ev.currentTarget.id); 
});

^這不會觸發任何

當我點擊毯內容什麼都不會發生什麼我要實現的是，但是當我點擊的毯子，我想要做的事。

來源

2015-08-25 Joseph118

可能重複[jQuery的：在父母和孩子單擊事件]（http://stackoverflow.com/questions/20561035/jquery-click-event-in-parent-and -children） – MKD

你可以在jsfiddle中發佈代碼嗎？因爲它在jsfidle中的工作方式如下https://jsfiddle.net/92jwad1w/ –

@UmeshSehta使用aruh鏈接：http://jsfiddle.net/arunpjohny/3gLe7gfz/2/ – Joseph118

一個簡單的解決方案是在blanket-content的點擊處理程序中停止事件傳播，以便它將觸發父元素的點擊處理程序。

您可以使用Event.stopPropagation()做

$('#blanket').on('click', function(ev) { 
 
    alert(ev.currentTarget.id); // 
 
}); 
 

 

 
$('#blanket-content').on('click', function(ev) { 
 
    ev.stopPropagation() 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<div id="blanket">blanket 
 
    <div id="blanket-content">blanket-content</div> 
 
</div>

另一種解決方案（why）是檢查點擊是否發生在blanket-content元素blanket點擊處理程序中

$('#blanket').on('click', function(ev) { 
 
    if (!$(ev.target).closest('#blanket-content').length) { 
 
    alert(ev.currentTarget.id); // 
 
    } 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<div id="blanket">blanket 
 
    <div id="blanket-content">blanket-content</div> 
 
</div>

來源

2015-08-25 05:15:18

我到目前爲止沒有使用stopPropagation（），並且沒有在＃blanket-content – Joseph118

中觸發點擊是否動態創建'＃blanket-content'？ –

不，他們不是我傾向於使用（）上的所有 – Joseph118

沒有必要做更多。只需添加ev.stopPropagation（）;在＃blanket-content點擊事件裏面。

<div id="blanket">PARENT 
    <div id="blanket-content">CHILD</div> 
</div> 


$('#blanket').on('click', function(ev) { 
    alert(ev.currentTarget.id); // 
}); 


$('#blanket-content').on('click', function(ev) { 
    ev.stopPropagation(); 
    alert(ev.currentTarget.id); 
});

入住這裏：https://jsfiddle.net/92jwad1w/

來源

2015-08-25 05:26:48

嘗試阻止默認操作，停止傳播史，如果仍然被引用它並不總是工作。

$('#blanket').on('click', function(event){ 
    $(event).preventDefault(); 
});

這將停止單擊事件的默認操作，並且可以正常工作。

的更多信息，請 here

的

來源

2015-08-25 05:34:41 Ronnie

使用javascript/jquery區分父級和子級之間的點擊

回答

相關問題