javascript - 了解 javascript/jquery 事件 : why does this alert fire four times?

标签 javascript jquery

我对使用 javascript 和 jquery 有基本的感觉,并且想了解事件触发时到底发生了什么。

此代码生成四个警报,显示“submitButton”。这是为什么?

<!DOCTYPE html>
<html>
    <head>
        <meta charset='utf-8'/>
        <title>Demo</title>
        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
        <script>
               $(document).ready(function () {
                         $("*").click(function(event) {
                            alert(event.target.id);
                        });
               });
        </script>

    <body>


        <div id='submitDiv'>
        <input id='submitButton' type="submit" class="button" value="Submit"/>
        </div>

    </body>
</html>

最佳答案

* 文字选择所有元素。因此,您要添加一个处理程序:

  1. 文档 (html)
  2. 正文
  3. 提交Div
  4. 提交按钮

请注意,事件会冒泡(从下到上到 DOM 的顶部)。您可以通过从处理程序返回 false 来防止事件冒泡:

$("*").click(function(event) {
    alert(event.target.id);
    return false;
});

Fiddle

关于javascript - 了解 javascript/jquery 事件 : why does this alert fire four times?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/18840317/

相关文章:

javascript - 由于语法无效,服务器无法处理 PUT 请求 (ASP.NET)

javascript - 更新图表时,arcTween donut 过渡在 Angular 4 中不起作用

javascript - 无法将带有文本的元素添加到 DOM 树

javascript - cURL 到 jQuery AJAX 的转换

连接到 MVC Controller 时 JavaScript POST 失败

javascript - 使用对象作为函数参数

javascript - 将状态更新为嵌套对象

jquery - 鼠标悬停时显示子项,鼠标移开时隐藏子项

jquery - 如果数据不在数据库中,如何在数据表中声明列?

jquery - 自动播放全背景 Vimeo 视频