JavaScript div innerhalb div-Container ausführen wird nicht bestimmten Code

Question

ich ein div haben innerhalb eines Behälters (div id = "x1"), die wird nicht spezifischen Befehle zugeordnet, um es mit meiner doFunc() Funktion ausführen. Wenn ich div außerhalb den Container platziere, läuft der Code einwandfrei. Was ich versuche, ist ein "Schrumpfbild" -Button oben rechts im Bild (ich habe CSS verwendet). Wenn der Benutzer auf das Bild klickt, wird es mit der Funktion large() größer, und wenn der Benutzer auf das X klickt, wird das Bild verkleinert und das X-Div ausgeblendet. Der Alert-Befehl ("Ich habe versucht!") Wird ausgeführt, wenn das X-Div innerhalb des Container-Div gesetzt wird, aber der Resize-Befehl wird nur ausgeführt, wenn das X-Div außerhalb seines Containers ist (nicht oben rechts im Bild, wo i muss es sein.) Jeder mit besseren Kenntnissen von HTML und JavaScript, können Sie mir bitte erklären, was ich tun muss, um diese 2 Zeilen Code laufen zu lassen, ohne meine "Click the X to close" Idee ablegen zu müssen?

document.getElementById(containerId).style.width="300px"; 
document.getElementById(xId).style.display="none"; 

HTML-

<div class="container" id="container1" onclick="large('container1','x1')"> 
<img src="icecream.jpg"> 
<div class="x" id="x1" onclick="doFunc('container1','x1')">X</div> 
    </div> 

JavaScript-

function large(containerId, xId){ 
document.getElementById(containerId).style.width="600px"; 
document.getElementById(xId).style.display="block"; 
} 
function doFunc(containerId, xId){ 
document.getElementById(containerId).style.width="300px"; 
document.getElementById(xId).style.display="none"; 
alert("I tried!"); 

Answer 1

, die da ist, wenn Sie es im Inneren des Behälters div setzen, wird auch die div ausführen, wenn Sie die zweite Funktion klicken, können Sie die Funktion in einem anderen div setzen sollte, die ich in meinem Beispiel setze es auf das Bild. (Ersetzen Sie einfach auf das Bild)

function large(containerId, xId){ 
 
document.getElementById(containerId).style.width="600px"; 
 
document.getElementById(xId).style.display="block"; 
 
} 
 
function doFunc(containerId, xId){ 
 
document.getElementById(containerId).style.width="300px"; 
 
document.getElementById(xId).style.display="none"; 
 
}

<div class="container"> 
 
\t <img id="img" onclick="large('img','x1')" style="max-width:100%;max-height:100%;" src="https://yt3.ggpht.com/-v0soe-ievYE/AAAAAAAAAAI/AAAAAAAAAAA/OixOH_h84Po/s900-c-k-no-mo-rj-c0xffffff/photo.jpg"> 
 
\t <div class="x" id="x1" onclick="doFunc('img','x1')">X</div> 
 
</div>

Answer 2

Bitte haben Sie einen Blick auf die unten funktionierenden Code.

Das Problem, das Sie gehabt wird, wann immer die div x1 das Ereignis geklickt wird, ist an die Mutter div container1 sprudelte, die ihre Ereignis Onclick ruft und erhöht die Breite. Daher, wenn Sie auf x1 klicken, ruft es zuerst doFunc und reduziert die Breite und aufgrund Ereignis sprudelt das übergeordnete hat das onclick Ereignis ausgelöst und large Ereignis, das die Breite wieder erhöht.

Daher sieht es nichts passiert ist.

Es wurde unten behoben, indem das Event-Bubbling mit e.stopPropagation() gestoppt wurde.

function large(containerId, xId){ 
 
document.getElementById(containerId).style.width="600px"; 
 
document.getElementById(xId).style.display="inline"; 
 
} 
 
function doFunc(e, containerId, xId){ 
 
    e.stopPropagation(); 
 
    e.preventDefault(); 
 
document.getElementById(containerId).style.width="300px"; 
 
document.getElementById(xId).style.display="none"; 
 
//alert("I tried!"); 
 
    }

.container 
 
{ 
 
    width: 300px; 
 
} 
 

 
.x { 
 
display: none; 
 
cursor: pointer; 
 
}

<div class="container" id="container1" onclick="large('container1','x1')"> 
 
<img width="100%" src="http://pisces.bbystatic.com//BestBuy_US/store/ee/2015/com/pm/nav_desktops_1115.jpg"> 
 
<div class="x" id="x1" onclick="doFunc(event, 'container1','x1')" style="float:right">X</div> 
 
    </div>