javascript - 点击span时不让li触发active，只触发span的active-PHP中文网问答

文章专题 AI工具学习下载问答源码最近更新

PHP

会员中心讲师中心微信公众号

javascript - 点击span时不让li触发active，只触发span的active

ringa_lee 2017-04-10 15:34:12

[JavaScript讨论组]

456

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <style type="text/css">
               ul {
                   list-style-type: none;
                   margin: 0;
                   padding: 0;
               }
               li:active {
                   background-color: darkgrey;
               }
               #text:active{
                   opacity: 0.5;
               }
        </style>        
    </head>
    <body>
        <ul>
            <li>
                <img src="http://dcloudio.github.io/mui/assets/img/cbd.jpg" width="100" height="100"/>
                <span id="text">
                         查看详情
                </span>
            </li>
        </ul>
    </body>
</html>

ringa_lee

全部回复(1)

天蓬老师2017-04-10 15:36:12 1楼

同时也会触发<li>是因为事件冒泡，阻止事件冒泡即可。

var span = document.getElementById('text');
span.onclick = function (e) {
    if (e.stopPropagation) {
       e.stopPropagation(); // 阻止事件冒泡
    }
    else {
        e.cancelBubble = true; // IE8及之前版本，阻止事件冒泡
    } 
    // do something
}

赞 +0

添加回复

专题推荐

更多>

热门话题

热门教程

更多>