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

发布时间：2021-08-27 11:45:52 作者：小新
来源：亿速云阅读：481

这篇文章主要介绍了怎么通过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 () {
                $("<h5>调用单击事件</h5>")
                    .appendTo(".res");
            });

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

        h2 {
            color: #ff311f;
        }

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

    </style>
</head>

<body>
<h2>亿速云</h2>

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

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

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

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() 能够使用函数来附加内容。

感谢你能够认真阅读完这篇文章，希望小编分享的“怎么通过jQuery给一个元素添加单击和双击事件”这篇文章对大家有帮助，同时也希望大家多多支持亿速云，关注亿速云行业资讯频道，更多相关知识等着你来学习!

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

相关阅读