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

发布于 2024-12-20 13:50:58 字数 1778 浏览 4 评论 0原文

我正在尝试编写一个将图像放入容器中的脚本。我想能够移动图像。问题是我检查是否有要放置的图像或者容器是否已满，当我尝试单击容器中的图像时，它首先运行检查。

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 获取值的检查的情况下单击图像

原文

I'm trying to write a script that places images into containers. I'm suppose to be able to move the images around.
The problem is I check for if I have an image to place or if the container is full and when I try to click the image in the container it runs the check first.

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;
            }

}

the HTML

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

How would I be able to click the images without clicking the div itself and triggering the check which would stop temp from getting the value?

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

另类 2024-12-27 13:50:58

防止向上冒泡，可以通过返回 false 来实现。

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

注意：这也可以防止默认行为（例如停止链接等）。
一些解释 JS 事件基础知识的阅读材料： Peter Paul Koch, Quirksmode.org< /a>

Prevent bubbling upwards, you can do so by returning false.

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

note: this also prevents default behavior (e.g. stops links from linking, etc).
Some reading material explaining the basics of JS events: Peter Paul Koch, Quirksmode.org

回复收藏 0 原文