click on screen undesirably initiates function for stacked elements/selectors

StackOverflow https://stackoverflow.com/questions/23637466

  •  21-07-2023
  •  | 
  •  

Question

I am currently working on an image cycler that covers the entire page + some navigation buttons (prev, next and pause/resume). What I want to do is this: The pause function should be initiated when I click the pause button (#pause) but also when I click the image (#background_cycler), no matter where. So basically the whole page should initiate that function (image covers the entire page!)

First, the html

<body>
    <p id="info">PRESS LOGO TO ENTER</p>

    <div id="background_cycler">
        <div id="bg_images">
        <img class="bg active" src="images/image1.jpg" alt="" />
        <img class="bg" src="images/image2.jpg" alt="" />
        <img class="bg" src="images/image3.jpg" alt="" />
        <img class="bg" src="images/image4.jpg" alt="" />
        </div>

        <p id="controls">
            <span id="pause">PAUSE</span>
            <span id="prev">PREV</span>
            <span id="next">NEXT</span>
        </p>
    </div>
...

and the javascript

$('#pause, #background_cycler').click(function pause() {});
...

When I click the image it all works fine. When I click the pause button things do not happen according to plan. After examining the pause function I can only conclude that when I am clicking the pause button I am in fact also clicking the image and therefore running the function twice (for both id's). Is this possible? And how come? It seems that when I replace #pause by #info as the selector, clicking that corresponding p-tag does do the trick.

Thanks

Était-ce utile?

La solution

You need to stop the bubbling of the click

$('#pause, #background_cycler').click(function (e) {
    e.stopPropagation();
});

More info can be found here http://api.jquery.com/event.stoppropagation/

If you don't stop the bubbling, when you click on pause, it will eventually trigger the click on the cycler div as well

Licencié sous: CC-BY-SA avec attribution
Non affilié à StackOverflow
scroll top