欢迎您访问 最编程 本站为您分享编程语言代码,编程技术文章!
您现在的位置是: 首页

在同一页面上如何让HTML和JS支持单击和双击事件的协同触发

最编程 2024-07-22 15:26:28
...

在同一个dom元素同时启用了单击和双击事件时,双击会触发两次单击事件和一次双击事件,并且触发顺序是:单击1 -> 单击2 -> 双击,我们需要想办法在双击时屏蔽掉单击的效果

基本思路:

延迟单击事件的响应,并在下一个单击事件触发时取消上一个还未执行的单击事件(处于延迟时间内),在双击事件触发时也取消还未执行的单击事件。

调用的相关功能:

onclick:单击事件
ondblclick:双击事件
setTimeout:设置延时执行,返回计时器
clearTimeout:清除一个计时器(不再调用其响应函数)

还需要一个全局变量来传递单击事件设置的计时器

示例

html code

<div onclick="singleClick()" ondblclick="dbClick()">点我</div>

js code

var timer;
function singleClick()
{
    clearTimeout(timer);
    timer = setTimeout("单击响应函数", 200);    //“200”单位是毫秒
}
function dbClick()
{
    clearTimeout(timer);
    双击响应函数
}