如何通过jQuery给一个元素添加单击和双击事件-js教程-PHP中文网

如何通过jQuery给一个元素添加单击和双击事件

藏色散人

发布： 2021-08-27 11:09:30

原创

2516 人浏览过

在上一篇《使用JavaScript从数组中删除最后一项（3种方法）》中给大家介绍了怎么使用JavaScript从数组中删除最后一项，感兴趣的朋友可以去学习了解一下~

本文讲解的重要内容是通过jQuery将单击和双击事件添加到元素中的方法。

在本文中我们将通过bind() 方法添加单击和双击事件。bind() 方法向被选元素添加一个或多个事件处理程序，以及当事件发生时运行的函数。此外，我们还会使用appendTo() 方法将结果添加到元素，appendTo() 方法在被选元素的结尾（仍然在内部）插入指定内容。

下面我们直接上代码：

<!DOCTYPE HTML>
<html>
<head>
    <meta charset="UTF-8">
    <title></title>
    <script src="jquery.min.js"></script>
    <script>
        $(document).ready(function () {
            $(".clickable_ele").bind("click", function () {
                $("<h4>调用单击事件</h4>")
                    .appendTo(".res");
            });

            $(".clickable_ele").bind("dblclick", function () {
                $("<h4>调用双击事件</h4>")
                    .appendTo(".res");
            });
        });
    </script>
    <style>
        body {
            text-align: center;
        }

        h1 {
            color: #ff311f;
        }

        .clickable_ele {
            font-size: 20px;
            font-weight: bold;
            color: #ff7800;
        }

    </style>
</head>

<body>
<h1>PHP中文网</h1>

<h3>
    如何给一个元素添加单击和双击事件?
</h3>

<div class="clickable_ele">
    可点击的元素
</div>

<div class="res"></div>
</body>
</html>

登录后复制

效果如下：

GIF 2021-8-27 星期五上午 10-58-23.gif

bind()语法是$(selector).bind(event,data,function,map)

参数分别表示：
event必需。规定添加到元素的一个或多个事件。
由空格分隔多个事件值。必须是有效的事件。
data可选。规定传递到函数的额外数据。
function必需。规定当事件发生时运行的函数。
map规定事件映射 ({event:function, event:function, ...})，包含要添加到元素的一个或多个事件，以及当事件发生时运行的函数。

登录后复制

appendTo()语法是$(content).appendTo(selector)

参数分别表示：
content必需。规定要插入的内容（可包含 HTML 标签）。
selector必需。规定把内容追加到哪个元素上。

登录后复制

注：

自 jQuery 版本 1.7 起，on() 方法是向被选元素添加事件处理程序的首选方法。

append() 和 appendTo() 方法执行的任务相同；不同之处在于：内容和选择器的位置，以及 append() 能够使用函数来附加内容。

最后给大家推荐《JavaScript基础教程》~欢迎大家学习~

以上是如何通过jQuery给一个元素添加单击和双击事件的详细内容。更多信息请关注PHP中文网其他相关文章！

php8，我来也

30分钟学会网站布局

尚观Oracle入门到精通视频教程

你的第一行 UNI-APP 代码

Flutter 从头到应用启动

兄弟连Linux新版视频教程

AXURE 9视频教程（适合产品经理交互产品设计UI）

零基础PS视频教程

16天带你入门UI视频教程

PS技巧和切片技巧视频教程

阿里云环境搭建以及项目上线视频教程

计算机网络概述——程序员必须掌握的基础知识

程序员必备教程——HTTP协议讲解

Websocket视频教程

如何通过jQuery给一个元素添加单击和双击事件