Warum ist Click-Ereignis ausgelöst auf div

Question

Ich habe zwei jsfiddler Setups mit zwei divs:

first setup

<div class="d1" style="background-color: red; position: fixed; top: 0; bottom: 0; right; 0; left: 0; right: 0;"> 
    <div class="d2" style="width: 200px; height: 100px; background-color: green; position: relative; top: 100px; left: 100px;"></div> 
</div> 

$(function() { 
    $('.d1').on('click', function(event) { 
    alert('clicked on red'); 
    }); 

    $('.d2').on('click', function(event) { 
    alert('clicked on green'); 
    }); 
}); 

second setup

<div class="d1" style="width: 200px; height: 100px; background-color: red; position: relative; top: 100px; left: 100px;"> 
</div> 
    <div class="d2" style="width: 200px; height: 100px; background-color: green; position: relative; top: 100px; left: 100px;"></div> 

$(function() { 
    $('.d1').on('click', function(event) { 
    alert('clicked on red'); 
    }); 

    $('.d2').on('click', function(event) { 
    alert('clicked on green'); 
    }); 
}); 

In beiden Fällen, die ich auf dem grünen div klicken und ohne eine Maustaste loszulassen, bewege ich den Mauszeiger über das rote div und lasse die Maustaste los. Im ersten Setup wird das Ereignis click für das rote div ausgelöst und im zweiten Setup wird es nicht ausgelöst.

Warum der Unterschied?

Answer 1

Da eine click Kurzschrift für eine mousedown UND eine mouseup Reihe von Ereignissen ist.

JQuery

Das Click-Ereignis wird erst nach dieser genauen Reihe von Ereignissen ausgelöst:

• Die Maustaste gedrückt wird, während sich der Zeiger innerhalb des Element ist.

• Die Maustaste wird losgelassen, während sich der Mauszeiger innerhalb des Elements befindet.

Wenn beide Bedingungen nicht erfüllt die Funktion nicht ausgelöst.

So

Klick auf den grünen div, und ohne eine Maustaste loslassen verschiebe ich den Mauszeiger über rot div zu schweben und dann die Taste loslassen.

Nur die roten Funktion wird ausgelöst, weil die mousedown auf dem grünen div geschieht , die innerhalb des roten div ist und so die rote div geklickt auch und die mouseup geschieht auf dem roten div.

Also mousedown und mouseup passieren nur auf dem roten div.

Answer 2

In der obigen Einstellung (1) haben Sie die grüne als Ihr Kind der roten. Wenn Sie also auf grün klicken, wird der Klick über das Elternelement automatisch aktiviert, sodass auch das rote div angeklickt wird.

Im Allgemeinen werden Sie diese Probleme nicht finden, da Sie kein click-Ereignis an das übergeordnete Element gebunden haben, wenn ein click -Ereignis bereits an ein untergeordnetes Element gebunden ist, wie bei der Einrichtung (2).

Der Klick auf den Elternteil würde keinen Klick auf Kind auslösen, es sei denn, die Maus befindet sich in der definierten Domäne des Kindes oder mit anderen Worten, wenn jemand auf das Kindelement selbst klickt.

Answer 3

In Ihrem ersten Schritt, warum es funktioniert, ist wie andere Antworten erwähnt, grün div ist in der roten div.Also, wenn du auf grünes div click-Ereignis klickst, wird grünes div gefeuert. Die gleiche Zeit wegen JS schönes Merkmal Event Sprudelndes selbe Klicken-Ereignis, das an es übergeben wird Elternteil, das rotes div ist.

Also, wenn Sie auf Ihr grünes div mouse down Ereignis Feuer für das grüne div und red Div gleichzeitig klicken. und wenn du mit der Maus zum roten div gehst und es loslässt, klicke auf das Event für das rote div-Feuer, aber nicht auf das grüne div. Um ein Klickereignis zu haben, müssen Sie die Maustaste gedrückt halten und die Maustaste loslassen. Aber in deinem Fall hat mouse up nicht für das grüne div geschossen.

In Ihrem zweiten Setup sind die tow divs nicht nebeneinander in einem anderen. Ereignisse an beiden Divs sind also individuell.

Alle anderen Antworten sind richtig ich die Theorie nur erklären: D

Answer 4

Wenn Sie dieses Problem passieren muß, um Sie so etwas wie

$(document).on("mousedown", function(e){ 
    var tar = $(e.target).attr('class'); 
    $(document).on("mouseup",function(){ 
    if (tar == "d1"){ 
     alert("clicked on red"); 
    } 
    if(tar == "d2"){ 
     alert("clicked on green"); 
    } 
    $(document).off("mouseup"); 
    }); 
}); 

JSFiddle

nicht sicher, ob dies tun könnten der Fall, aber nur um dies zu bringen.