Нажатие на дочерний элемент без запуска родителя

Question

Я пытаюсь написать скрипт, который помещает изображения в контейнеры.Я полагаю, чтобы иметь возможность перемещать изображения вокруг.Проблема в том, что я проверяю, есть ли у меня изображение для размещения или контейнер заполнен, и когда я пытаюсь щелкнуть изображение в контейнере, сначала выполняется проверка.

function isTemp()
        {
            if(temp == null)
            {
                alert("Please pick an item to place in the container");
            }
            else
            {
                holder = true;
            }
        }
        function fillLarge()
        {
            isTemp();
            if(holder)
            {
                if(largeArray[0] != undefined &&largeArray[1] != undefined &&largeArray[2] != undefined && largeArray[3] != undefined &&largeArray[4] != undefined &&largeArray[5] != undefined)
                {
                    alert('This crate is full');
                }
                else
                {
                    for (var i=0; i<6; i++)
                    {
                        if (largeArray[i] == undefined)
                        {
                            largeArray[i] = /*"<span id = '"+temp+"'onclick='temp=this.id; break;'>*/"<img src='image/"+temp+".jpg'/>"/*</span>"*/;
                            largeArray[i].id = temp;            
                            document.getElementById("la").innerHTML += largeArray[i];
                            break;
                        }
                    }
                    document.getElementById(temp).style.display="none";
                    temp = null;
                }
                holder = false;
            }

}

HTML

<div>
        <h3> LARGE CONTAINER </h3>
        <span id="la" onclick="fillLarge();"> 
        </span> </div>

Как бы я мог щелкнуть по изображениям, не щелкая сам элемент div и не вызывая проверку, которая помешала бы получению значения temp?

Answer 1

Предотвратить пузыриться вверх, вы можете сделать это, вернув false.

 <div>
    <h3> LARGE CONTAINER </h3>
    <span id="la" onclick="fillLarge(); return false;"></span>
 </div>

примечание: это также предотвращает поведение по умолчанию (например, предотвращает ссылки и т. Д.). Некоторые материалы для чтения, объясняющие основы событий JS: Питер Пол Кох, Quirksmode.org

Answer 2

Попробуйте event.stopPropagation () - задокументировано здесь