怎样通过jQuery给一个元素加上点击和双击鼠标事件

lxf2023-03-11 08:38:01

在上一篇《使用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>AdminJS</h1>

<h3>
    怎么给一个元素加上点击和双击鼠标事情?
</h3>

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

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

实际效果如下所示:

怎样通过jQuery给一个元素加上点击和双击鼠标事件

  • 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给一个元素加上点击和双击鼠标事件具体内容,大量欢迎关注AdminJS其他类似文章!