单击子元素而不触发父元素

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 事件基础的阅读材料：Peter Paul Koch, Quirksmode.org

Answer 2

尝试 event.stopPropagation() - 记录在 here