jquery - 停止 html 元素 onclick 传播

Question

我的 HTML 代码是这样的：

    <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是div悬停时出现的弹出窗口以选择自动时间，如果单击div自身（在进度弹出窗口中不显示），则自动播放停止。

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

问题是，如果我点击 n 次 on li，onclickondiv也会被触发，使播放停止。

Answer 1

由于 li 元素在 div 中，因此您无法仅单击 li。相反，您可以使用event.target查看单击了哪个元素

然后编写一个条件检查目标是 div 还是 li。

Answer 2

尝试从您的onClick. 这将停止传播：

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