CODEWITHSUNDEEP
jqueryhtmlonclick
Abdul Rahuman E A
Abdul Rahuman E A

Reputation: 15

stop html elements onclick propogation

My HTML code is like this:

    <div id="divAutoPlay" onclick="autoPlay(0);">
        <ul>
            <li><a href="javascript:;" onClick="autoPlay(3);">3 Times</a></li>
            <li><a href="javascript:;" onClick="autoPlay(5);">5 Times</a></li>
            <li><a href="javascript:;" onClick="autoPlay(10);">10 Times</a></li>
        </ul>
     </div>

ul is a popup coming on div hover to select auto times, and if clicked div itself (on progress popup don't show up) auto play stops.

    function autoPlay(playCount){
        if(autoPlayCount>0)
           autoPlayCount=playCount;
        else if(playCount>0){
           setTimeout(function(){
               autoPlayCount=playCount;
               $('#divPlay').click();
           }, 2000);
        }
        // don't know how to add stopPropogation effectively
        //event.stopPropagation();
        // commented codes doesn't worked
        /*            
        if (event.stopImmediatePropagation){
            event.stopImmediatePropagation();
        }else if(window.event){
            window.event.cancelBubble=true;
        }
        */
        // for this also changed function definition to pass 'event' onClick="autoPlay(event,10);"
    }

The problem is that if I clicked n times on li, the onclick on div is also fired, making the playback stop.

Upvotes: 1

Views: 143

Answers (2)

user1741851
user1741851

Reputation:

Since the li elements are inside div, there's no way you can click only on li. Instead you can see which element was clicked using event.target

Then write a condition checking whether the target is div or li.

Upvotes: 1

Shalom Aleichem
Shalom Aleichem

Reputation: 3027

Try returning false from your onClick. This will stop the propagation:

<div id="divAutoPlay" onclick="autoPlay(0);">
    <ul>
        <li><a href="javascript:;" onClick="autoPlay(3); return false;">3 Times</a></li>
        <li><a href="javascript:;" onClick="autoPlay(5); return false;">5 Times</a></li>
        <li><a href="javascript:;" onClick="autoPlay(10); return false;">10 Times</a></li>
    </ul>
 </div>

Upvotes: 1

Related Questions