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

问题在于，如果我在li点击了n次，onclick上的div也会被触发，从而停止播放。

Answer 1

尝试从onClick返回false。这将阻止传播：

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

Answer 2

由于li元素在div中，所以你无法只点击li。相反，您可以看到使用了哪个元素 event.target

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

停止html元素onclick传播

2 个答案: