返回顶部
首页 > 资讯 > 前端开发 > VUE >怎么通过jQuery给一个元素添加单击和双击事件
  • 612
分享到

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

2024-04-02 19:04:59 612人浏览 安东尼
摘要

这篇文章主要介绍了怎么通过Jquery给一个元素添加单击和双击事件,具有一定借鉴价值,感兴趣的朋友可以参考下,希望大家阅读完这篇文章之后大有收获,下面让小编带着大家一起了解一下。将通过bind() 方法添加

这篇文章主要介绍了怎么通过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给一个元素添加单击和双击事件”这篇文章对大家有帮助,同时也希望大家多多支持编程网,关注编程网VUE频道,更多相关知识等着你来学习!

--结束END--

本文标题: 怎么通过jQuery给一个元素添加单击和双击事件

本文链接: https://lsjlt.com/news/79705.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com    QQ/279061341

猜你喜欢
  • 怎么通过jQuery给一个元素添加单击和双击事件
    这篇文章主要介绍了怎么通过jQuery给一个元素添加单击和双击事件,具有一定借鉴价值,感兴趣的朋友可以参考下,希望大家阅读完这篇文章之后大有收获,下面让小编带着大家一起了解一下。将通过bind() 方法添加...
    99+
    2024-04-02
  • jquery中怎么给一个元素设置点击事件
    本篇内容主要讲解“jquery中怎么给一个元素设置点击事件”,感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷,实用性强。下面就让小编来带大家学习“jquery中怎么给一个元素设置点击事件”吧! ...
    99+
    2024-04-02
  • jquery如何给某个类元素增加点击事件
    本篇内容介绍了“jquery如何给某个类元素增加点击事件”的有关知识,在实际案例的操作过程中,不少人都会遇到这样的困境,接下来就让小编带领大家学习一下如何处理这些情况吧!希望大家仔细阅读,能够学有所成! ...
    99+
    2024-04-02
  • Jquery中怎么动态添加元素并添加点击事件
    本文小编为大家详细介绍“Jquery中怎么动态添加元素并添加点击事件”,内容详细,步骤清晰,细节处理妥当,希望这篇“Jquery中怎么动态添加元素并添加点击事件”文章能帮助大家解决疑惑,下面跟着小编的思路慢慢深入,一起来学习新知识吧。给动态...
    99+
    2023-06-17
  • vue动态添加元素点击事件不起作用怎么办
    在Vue中,很多时候我们需要动态地添加元素到页面上。然而,有时候我们会发现这些动态添加的元素的点击事件不起作用,这是为什么呢?本文将为您介绍原因及解决方法。一、原因我们首先来了解一下为什么动态添加的元素的点击事件不起作用。这是因为Vue在页...
    99+
    2023-05-14
  • js怎么实现为每一个li添加一个点击事件
    本篇内容主要讲解“js怎么实现为每一个li添加一个点击事件”,感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷,实用性强。下面就让小编来带大家学习“js怎么实现为每一个li添加一个点击事件”吧!<u...
    99+
    2024-04-02
  • jQuery怎么实现点击一下按钮添加一个段落
    今天小编给大家分享一下jQuery怎么实现点击一下按钮添加一个段落的相关知识点,内容详细,逻辑清晰,相信大部分人都还太了解这方面的知识,所以分享这篇文章给大家参考一下,希望大家阅读完这篇文章后有所收获,下面...
    99+
    2024-04-02
  • C#中怎么利用listbox实现一个双击事件
    这篇文章将为大家详细讲解有关C#中怎么利用listbox实现一个双击事件,文章内容质量较高,因此小编分享给大家做个参考,希望大家阅读完这篇文章后对相关知识有一定的了解。private void Page_Load(obj...
    99+
    2023-06-17
  • jQuery怎么解决添加元素后不执行原有事件
    本篇内容主要讲解“jQuery怎么解决添加元素后不执行原有事件”,感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷,实用性强。下面就让小编来带大家学习“jQuery怎么解决添加元素后不执行原有事件”吧!我们先来看下我的错误代码html:&...
    99+
    2023-06-25
软考高级职称资格查询
推荐阅读
编程网,编程工程师的家园,是目前国内优秀的开源技术社区之一,形成了由开源软件库、代码分享、资讯、协作翻译、讨论区和博客等几大频道内容,为IT开发者提供了一个发现、使用、并交流开源技术的平台。
  • 官方手机版

  • 微信公众号

  • 商务合作