Why is this click event firing for the wrong element?"

Question

I am trying to add a zoom out function. When I click anywhere on screen, it does zoom out, but immediately after, it zooms back in. Why is it like that, even though I have used an if function?

    <!DOCTYPE html>
    <html onclick="zoomOut()"> <!--zoom out added to html element-->
    <head>
    <script src="jquery.js"></script>
    <style>

    .pic{
        height:150px;
    }
    .picbig{
        position: absolute;
        width:0px;
        -webkit-transition:width 0.3s linear 0s;
        transition:width 0.3s linear 0s;
        z-index:10;
    }

    .picb
    {

        width:500px;
    }

    </style>
    </head>
    <body >

    <div id="edgetoedge">
    <img id="1" class="pic" src="numerouno.jpg"  onClick="zoom(this.id)">
    <img class="picbig" src="numerouno.jpg"  >

    <img id="2" class="pic" src="numerodue.jpg" alt="heart" onClick="zoom(this.id)">
    <img  class="picbig" src="numerodue.jpg" >

    <img id="3" class="pic" src="numerotre.jpg" alt="hardhat" onClick="zoom(this.id)">
    <img class="picbig" src="numerotre.jpg" >
    </div>

    <script>

    var x=1;

    function zoom(clicked_id)
    {
        $("#"+clicked_id).next().toggleClass("picb");
    }

This is zoomOut function

function zoomOut()
    {alert("zooming out"); if ($("#edgetoedge img").hasClass( "picb" )) {$(".picbig").removeClass("picb");}}

rest of the code don't matter

Answer 1

Solved by adding event.stopPropagation(); to zoom function

function zoom(clicked_id)
    {


            $("#"+clicked_id).next().toggleClass("picb");
        event.stopPropagation();



    }

Why is this click event firing for the wrong element?"

Question

1 answers

solution1
1 2015-02-11 19:56:51

Why is this click event firing for the wrong element?"

Question

1 answers

solution1 1 2015-02-11 19:56:51

solution1
1 2015-02-11 19:56:51