javascript - 如何在 javascript 中使触摸事件(在 dom 上)冒泡?

标签 javascript android jquery cordova touch

在我看来触摸事件不会冒泡,即使是everyone seems to say or imply that they do .我已经在 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 事件被触发。怎么回事?

最佳答案

您不了解事件冒泡。

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

在您的 HTML 中,您有 sibling 。

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

要使用冒泡,它们需要嵌套。

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

关于javascript - 如何在 javascript 中使触摸事件(在 dom 上)冒泡?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/18677107/

相关文章:

android - 在 Android map 上更改自定义标记的颜色

javascript - 如果 li 为空,则在 jQuery 中隐藏 excluding span 属性

javascript - 从服务器加载 svg 并将其显示到 html 元素中

javascript - 无法将ajax传递给 Controller ​​功能

javascript - 通过 HTML5 API(RecordJS 或替代方案)将音频录制为 AAC

android - 从 Activity 向屏幕打印一个整数

javascript - 如何在将 <li> 附加到 <li> 组中时滚动 <li>

javascript - 函数在变量定义之前返回

javascript - 使用slideNumber Reveal.js 检索当前幻灯片的编号

android - React-native 打开另一个应用