2

在我看来，触摸事件不会冒泡，即使每个人似乎都说或暗示他们会冒泡。我已经在 Chrome 29.0.1547.62（使用“模拟触摸事件”覆盖）和 android webview（使用cordova）上进行了测试，touchstart 事件都没有发生事件冒泡。这是一个例子：

<!doctype html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">

    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js" type="text/javascript"></script>
    <style>
        #a {
            background-color: red;
            position: absolute;
            top: 0px;
            height: 100px;
            width: 100%;
        }
        #b {
            background-color: blue;
            position: absolute;
            top: 0px;
            height: 50px;
            width: 100%;
        }
    </style>
    <script>
        $(function() {
            $('#a').on('touchstart', function(){
                console.log("a start")
            })

            $('#b').on('touchstart', function(){
                console.log("b start")
            })
        })
    </script>
</head>
<body>
<div id="a"></div>
<div id="b"></div>
</body>
</html>

即使 b 在 a 之上，当 b 被触摸时，也只会触发 b 的 touchstart 事件。这是怎么回事？

4

1 回答 1

2

你不理解事件冒泡。

这并不意味着偶数会触及所有周围的元素。这意味着事件从嵌套最深的元素开始，一直向上通过其祖先到document，并调用它在途中找到的处理程序。

在您的 HTML 中，您有兄弟姐妹。

<div id="a"></div>
<div id="b"></div>

为了利用冒泡，它们需要嵌套。

<div id="a">
    <div id="b"></div>
</div>
于 2013-09-07T19:46:06.980 回答