現在、jQuery を使用して div をクリック可能にしています。この div にはアンカーもあります。私が直面している問題は、アンカーをクリックすると、両方のクリック イベントが発生することです (div とアンカーの場合)。アンカーがクリックされたときに div の onclick イベントが発生しないようにするにはどうすればよいですか?
壊れたコードは次のとおりです。
JavaScript
var url = $("#clickable a").attr("href");
$("#clickable").click(function() {
window.location = url;
return true;
})
HTML
<div id="clickable">
<!-- Other content. -->
<a href="http://foo.com">I don't want #clickable to handle this click event.</a>
</div>
イベントは、クリック イベントが関連付けられている DOM の最高点にバブルします。したがって、あなたの例では、div に他の明示的にクリック可能な要素がなくても、div のすべての子要素は、DIV のクリック イベント ハンドラーがそれをキャッチするまで、クリック イベントを DOM にバブルします。
これには 2 つの解決策があります。それは、誰が実際にイベントを開始したかを確認することです。jQuery は、イベントとともに eventargs オブジェクトを渡します。
$("#clickable").click(function(e) {
var senderElement = e.target;
// Check if sender is the <div> element e.g.
// if($(e.target).is("div")) {
window.location = url;
return true;
});
クリック イベント ハンドラーをリンクにアタッチして、独自のハンドラーの実行後にイベント バブリングを停止するように指示することもできます。
$("#clickable a").click(function(e) {
// Do something
e.stopPropagation();
});
stopPropagationメソッドを使用します。例を参照してください。
$("#clickable a").click(function(e) {
e.stopPropagation();
});
jQuery Docsで述べたように：
stopPropagationメソッドは、イベントが DOM ツリーをバブリングするのを防ぎ、親ハンドラーにイベントが通知されるのを防ぎます。
他のリスナーがこのイベントを処理するのを妨げないことに注意してください (例: ボタンの複数のクリック ハンドラー)。それが目的の効果でない場合は、stopImmediatePropagation代わりに使用する必要があります。
ここでは、jQuery 以外のコード (純粋な JavaScript) を探しているすべての人のための私のソリューションを示します。
document.getElementById("clickable").addEventListener("click", function( e ){
e = window.event || e;
if(this === e.target) {
// put your code here
}
});
親の子をクリックした場合、コードは実行されません
クリック可能な div に複数の要素がある場合は、次のようにする必要があります。
$('#clickable *').click(function(e){ e.stopPropagation(); });
return false;orを使用e.stopPropogation();すると、それ以上コードを実行できなくなります。この時点で流れが止まります。
Angular 2+ を使用した例を次に示します。
たとえば、ユーザーがモーダル コンポーネントの外側をクリックした場合にモーダル コンポーネントを閉じるには、次のようにします。
// Close the modal if the document is clicked.
@HostListener('document:click', ['$event'])
public onDocumentClick(event: MouseEvent): void {
this.closeModal();
}
// Don't close the modal if the modal itself is clicked.
@HostListener('click', ['$event'])
public onClick(event: MouseEvent): void {
event.stopPropagation();
}
var inner = document.querySelector("#inner");
var outer = document.querySelector("#outer");
inner.addEventListener('click',innerFunction);
outer.addEventListener('click',outerFunction);
function innerFunction(event){
event.stopPropagation();
console.log("Inner Functiuon");
}
function outerFunction(event){
console.log("Outer Functiuon");
}<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>Pramod Kharade-Event with Outer and Inner Progration</title>
</head>
<body>
<div id="outer" style="width:100px;height:100px;background-color:green;">
<div id="inner" style="width:35px;height:35px;background-color:yellow;"></div>
</div>
</body>
</html>一部のサブ要素をクリックできないように指定するには、次の例のように css 階層を記述します。
この例では、クラス「.subtable」を持つテーブル内の tr 内の td 内の要素 (*) への伝播を停止します
$(document).ready(function()
{
$(".subtable tr td *").click(function (event)
{
event.stopPropagation();
});
});
すべてのソリューションは複雑で、jscript です。最も単純なバージョンは次のとおりです。
var IsChildWindow=false;
function ParentClick()
{
if(IsChildWindow==true)
{
IsChildWindow==false;
return;
}
//do ur work here
}
function ChildClick()
{
IsChildWindow=true;
//Do ur work here
}
次のように追加aします。
<a href="http://foo.com" onclick="return false;">....</a>
または次return false;のようなクリックハンドラから#clickable：
$("#clickable").click(function() {
var url = $("#clickable a").attr("href");
window.location = url;
return false;
});
<a onclick="return false;" href="http://foo.com">I want to ignore my parent's onclick event.</a>