这篇文章主要介绍了怎么通过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给一个元素添加单击和双击事件”这篇文章对大家有帮助,同时也希望大家多多支持亿速云,关注亿速云行业资讯频道,更多相关知识等着你来学习!
免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。