深层子元素结构下的事件委托——利用matches api

matches和querySelector的选择器结构类似不支持ui:toolbar这种模式

这要求以后我们都要以ui-Panel这样的结构来命名标签

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
  <style>
    li{
      margin:20px 0;
      background:skyblue;
    }
  </style>
    <ul>
        <li class="item">
            <div class="test">
                <span class="test">
                    <span>123</span>
                </span>
            </div>
        </li>
        <li class="item">
            <div class="test">
                <span class="test">
                    <span>123</span>
                </span>
            </div>
        </li>
        <li class="item">
            <div class="test">
                <span class="test">
                    <span>123</span>
                </span>
            </div>
        </li>
        <li class="item">
            <div class="test">
                <span class="test">
                    <span>asdf</span>
                </span>
            </div>
        </li>
        <li class="item">
            <div class="test">
                <span class="test">
                    <span>asdf</span>
                </span>
            </div>
        </li>
    </ul>
    <script>
        var ul=document.querySelector("ul");
        ul.addEventListener("click",function(e){
            if(e.target.matches(".item *")){
                alert(1)
            }
        },false);

    </script>
</body>
</html>

最后编辑于：2017.12.03 07:48:09

深层子元素结构下的事件委托——利用matches api

matches和querySelector的选择器结构类似不支持ui:toolbar这种模式

推荐阅读更多精彩内容