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

本文讲解的重要内容是通过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>
    

效果如下：

• 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给一个元素添加单击和双击事件的详细内容，更多请关注其它相关文章！

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！